将抽屉列表瓷砖与抽屉底部对齐 [英] Align drawer list tile at the bottom of the drawer

问题描述

我已经为我的应用程序创建了一个抽屉。它工作正常，但我无法将注销按钮与抽屉底部对齐。我尝试过Align小工具，但它不起作用。尝试展开的小工具内的Align小工具，仍然不起作用。几乎尝试了我能找到的所有方法。不知道它为什么不对齐。请帮助。

 drawer: Drawer(
    child: ListView(
      children: <Widget>[
        DrawerHeader(
          child: Align(
            alignment: Alignment.topLeft,
            child: Container(
              child: Column(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: const Text('USER'),
                    radius: 25,
                  ),
                  Text(name),
                  Text(email)
                ],
              ),
            ),
          ),
        ),
        ListTile(
          title: Text("Settings",style:TextStyle(fontWeight: FontWeight.bold),),
          trailing: Icon(Icons.settings),
          onTap: () {
            context.read<NavCubit>().showHome();
            Navigator.pop(context);
          },
        ),
        Container(
          height: 1.0,
          width: MediaQuery.of(context).size.width,
          color: Colors.tealAccent,
        ),
        ListTile(
          title: Text("Learning",style:TextStyle(fontWeight: FontWeight.bold),),
          trailing: Icon(Icons.book),
          onTap: () {
            context.read<NavCubit>().showContracts();
          },
        ),
        Container(
          height: 1.0,
          width: MediaQuery.of(context).size.width,
          color: Colors.tealAccent,
        ),
             Align(
              alignment: Alignment.bottomCenter,
              child: ListTile(
                title: Text("Log Out",style:TextStyle(fontWeight: FontWeight.bold),),
                trailing: Icon(Icons.logout),
                onTap: () {
                  context.read<NavCubit>().showContracts();
                },
              ),
            ),
      ],
    ),

推荐答案

请参考以下代码，希望对您有所帮助。

drawer: Container(
        width: 250,
        child: Drawer(
          //drawer Code
          child: Column(
            children: <Widget>[
             
              ListTile(
                hoverColor: Colors.blue,
                dense: true,
                visualDensity: VisualDensity(vertical: -4),
                leading: Icon(
                  Icons.show_chart,
                  color: Colors.black,
                ),
                title: Text('All Leads'),
                onTap: () {},
              ),
              Divider(
                color: Colors.grey,
              ),
              ListTile(
                hoverColor: Colors.blue,
                dense: true,
                visualDensity: VisualDensity(vertical: -4),
                leading: Icon(
                  Icons.bar_chart_rounded,
                  color: Colors.black,
                ),
                title: Text('Graphs'),
                onTap: () { },
              ),
              Divider(
                color: Colors.grey,
              ),
              ListTile(
                hoverColor: Colors.blue,
                dense: true,
                visualDensity: VisualDensity(vertical: -4),
                leading: Icon(
                  Icons.group,
                  color: Colors.black,
                ),
                title: Text('Agents'),
                onTap: () {},
              ),
              Divider(
                color: Colors.grey,
              ),
              ListTile(
                hoverColor: Colors.blue,
                dense: true,
                visualDensity: VisualDensity(vertical: -4),
                leading: Icon(
                  Icons.book,
                  color: Colors.black,
                ),
                title: Text('About Us'),
                onTap: () {},
              ),
              Divider(
                color: Colors.grey,
              ),
              Expanded(
                child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: ListTile(
                    hoverColor: Colors.blue,
                    dense: true,
                    visualDensity: VisualDensity(vertical: -4),
                    leading: Icon(
                      Icons.logout,
                      color: Colors.black,
                    ),
                    title: Text('Logout'),
                    onTap: () {},
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

您的抽屉看起来像这样->；

这篇关于将抽屉列表瓷砖与抽屉底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！