代码之家  ›  专栏  ›  技术社区  ›  Aouiche Redouane

修复Flutter抽屉中的物品

  •  0
  • Aouiche Redouane  · 技术社区  · 5 月前

    我试图让页脚小部件与抽屉底部对齐,但仍然无法在抽屉顶部显示抽屉标题和列表。以下是我正在尝试的:

    //drawer class 
     class _NavigationDrawer extends State<NavigationDrawer> {
      @override
      Widget build(BuildContext context) {
        return Drawer(
          backgroundColor: Colors.white,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                buildHeader(context),
                buildMenuItem(context),
                buildFooter(context),
              ],
            ),
          ),
        );
      }
    
    //header function
     Widget buildHeader(BuildContext context) => Material(
            color: Colors.white,
            child: InkWell(
              onTap: () {},
              child: Container(
                padding: EdgeInsets.only(
                  top: MediaQuery.of(context).padding.top + 24,
                  bottom: 24,
                ),
                child: Column(
                  children: [
                    Center(
                      child: Image.asset(
                        'assets/img/logo.png',
                        width: MediaQuery.of(context).size.width * 0.5,
                        height: MediaQuery.of(context).size.width * 0.2,
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
    
    //body function
    Widget buildMenuItem(BuildContext context) => Container(
            padding: EdgeInsets.all(24),
            color: Colors.red,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.home),
                  title: Text('Home'),
                  onTap: () {
                    Navigator.of(context).pushReplacement(MaterialPageRoute(
                      //push
                      builder: (context) => HomeScreen(),
                    ));
                  },
                ),
                ListTile(
                  leading: Icon(Icons.person_2),
                  title: Text('Profile'),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.home_work_rounded),
                  title: Text('Exwor'),
                  onTap: () {},
                ),
                // const Divider(color: Colors.black),
                ListTile(
                  leading: Icon(Icons.help),
                  title: Text('help'),
                  onTap: () {},
                ),
                ListTile(
                  title: Text(
                    "Logout",
                  ),
                  leading: Icon(
                    Icons.logout_outlined,
                  ),
                  onTap: () {},
                ),
              ],
            ),
          );
    
    //footer function
    Widget buildFooter(BuildContext context) => Container(
            color: Colors.green,
            alignment: Alignment.bottomCenter,
            // margin: EdgeInsets.only(top: 100),
            child: Align(
                alignment: FractionalOffset.bottomCenter,
                child: Column(
                  children: <Widget>[
                    Text("Developed by .."),
                    Text(
                      "Version 1.0.0",
                      style: TextStyle(
                          fontSize: 11,
                          color: Colors.black,
                          fontWeight: FontWeight.bold),
                    )
                  ],
                )),
          );
    

    图片: DRAWE

    绿色容器(buildfooter)应该与抽屉底部对齐,我该如何修复?请帮我找到解决方案

    3 回复  |  直到 5 月前
        1
  •  0
  •   Yusuf    5 月前

    您在抽屉中使用的SingleChildScrollView导致了这种情况。您可以尝试将其删除,然后像这样编写抽屉小部件。

    class _NavigationDrawer extends State<NavigationDrawer> {
      @override
      Widget build(BuildContext context) {
        return Drawer(
          backgroundColor: Colors.white,
          //remove SingleChildScrollView
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              buildHeader(context),
              Expanded(child: buildMenuItem(context)), // This will take remaining space
              buildFooter(context),
            ],
          ),
        );
      }
    }
    

    如果它看起来仍然不像你想要的,你可以尝试添加到列中

    主轴对齐:主轴对齐。间距之间,

        2
  •  0
  •   DroidFlutter    5 月前

    用Expanded包装buildMenuItem->SingleChildScrollView如下。

           Drawer(
              backgroundColor: Colors.white,
              child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                buildHeader(context),
                Expanded(
                child: SingleChildScrollView(child: buildMenuItem(context))),
                buildFooter(context),
              ],
            ))
    
        3
  •  0
  •   Akshay Gupta    5 月前

    最简单的解决方案是删除SingleChildScrollView,并将扩展小部件添加到buildmenuitem中,仅此而已。