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

修复Flutter抽屉中的物品

iso visual-studio-code dart flutter android

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 月前

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),
        ],
      ),
    );
  }
}

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

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

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),
          ],
        ))

Akshay Gupta 5 月前

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