Flutter 中如何将 SideBar 放在其他元素下方

在 Flutter 中，我们可以使用 Positioned 组件将 SideBar 放在其他元素下方。

将 sidecat 包裹在 Positioned 组件中，并设置 top 值为 SideBar 的高度即可让它在其他元素的下面显示。

Positioned(
  top: SideBar.height,
  child: side_cat(),
)

例如，以下代码展示了如何在 SingleChildScrollView 中将 SideBar 放在其他元素下方：

menu: SingleChildScrollView(
  padding: const EdgeInsets.symmetric(vertical: 50.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Padding(
        padding: const EdgeInsets.only(left: 16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextButton(
              onPressed: () => Global().getrecently(context),
              child: Text(
                shijian(),
                style: TextStyle(color: Colors.white),
              ),
            ),
            SizedBox(height: 20.0),
          ],
        ),
      ),
      Positioned(
        top: SideBar.height,
        child: side_cat(),
      ),
      ListTile(
        leading: const Icon(Icons.cached, size: 20.0, color: Colors.white),
        title: Text(
          '查看成绩',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () => Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => scorepage(),
          ),
        ),
      ),
      ListTile(
        leading: const Icon(Icons.score_outlined, size: 20.0, color: Colors.white),
        title: Text(
          'chatgpt',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () {
          Navigator.of(context).pop(); //关闭侧边栏
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => chat_gpt(),
            ),
          );
        },
      ),
      ListTile(
        leading: const Icon(Icons.book_online, size: 20.0, color: Colors.white),
        title: Text(
          '一键评教',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () {
          Navigator.of(context).pop(); //关闭侧边栏
          Global().No_perception_login().then((value) => null);
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => pingjiao(),
            ),
          );
        },
      ),
      ListTile(
        leading: const Icon(Icons.book_online, size: 20.0, color: Colors.white),
        title: Text(
          '请假历史',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () {
          Navigator.of(context).pop(); //关闭侧边栏
          Global().No_perception_login().then((value) => null);
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => qingjia(),
            ),
          );
        },
      ),
      ListTile(
        leading: const Icon(Icons.colorize, size: 20.0, color: Colors.white),
        title: Text(
          '调个色',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () {
          showDialog(
            context: context,
            builder: (context) {
              return MaterialApp(
                theme: ThemeData.light(),
                darkTheme: ThemeData.dark(),
                home: AlertDialog(
                  title: Text('选择当前页颜色'),
                  content: SingleChildScrollView(
                    child: ColorPicker(
                      pickerColor: Global.home_currentcolor,
                      onColorChanged: changeColor,
                      colorPickerWidth: 300.0,
                      pickerAreaHeightPercent: 0.7,
                      enableAlpha: false,
                      displayThumbColor: true,
                      showLabel: true,
                      paletteType: PaletteType.hsv,
                      pickerAreaBorderRadius: const BorderRadius.only(
                        topLeft: const Radius.circular(2.0),
                        topRight: const Radius.circular(2.0),
                      ),
                    ),
                  ),
                  actions: <Widget>[
                    TextButton(
                      child: const Text('确定'),
                      onPressed: () async {
                        setState(() => Global.home_currentcolor = Global.home_pickcolor);
                        getApplicationDocumentsDirectory().then((value) {
                          File file = File(value.path + '/color.txt');
                          //判断文件是否存在
                          if (file.existsSync()) {
                            //存在则写入
                            file.writeAsString(Global.home_currentcolor.value.toString());
                          } else {
                            //不存在则创建文件并写入
                            file.createSync();
                            file.writeAsString(Global.home_currentcolor.value.toString());
                          }
                        });
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                ),
              );
            },
          );
        },
      ),
      ListTile(
        leading: const Icon(Icons.score_outlined, size: 20.0, color: Colors.white),
        title: Text(
          '查看学习通已批完的考试但未发布的成绩',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () {
          Navigator.of(context).pop(); //关闭侧边栏
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => chaoxinglogin(),
            ),
          );
        },
      ),
      ListTile(
        leading: const Icon(Icons.cached, size: 20.0, color: Colors.white),
        title: Text(
          '重新登入',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () {
          deleteFile();
          AchievementView(context,
            title: '成功!',
            subTitle: '已清除课程和成绩缓存，请退出app重新登录',
            //onTab: _onTabAchievement,
            icon: Icon(Icons.insert_emoticon, color: Colors.white),
            //typeAnimationContent: AnimationTypeAchievement.fadeSlideToUp,
            //borderRadius: 5.0,
            color: Colors.green,
            //textStyleTitle: TextStyle(),
            //textStyleSubTitle: TextStyle(),
            //alignment: Alignment.topCenter,
            duration: Duration(seconds: 3),
            isCircle: true, listener: (status) {
              print(status);
            },
          )..show();
        },
      ),
      ListTile(
        leading: const Icon(Icons.settings, size: 20.0, color: Colors.white),
        title: Text(
          '关于&设置',
          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => about(),
            ),
          );
        },
      ),
    ],
  ),
);

这样，SideBar 就会被放置在其他元素下方，并且能够正常滚动。

注意：

• SideBar.height 必须是 SideBar 的实际高度。
• 如果 SideBar 的高度是动态的，则需要在 SideBar 的高度发生变化时更新 Positioned 组件的 top 值。