Question

这是我上一个问题（https://stackoverflow.com/a/52442667/10396137）的后续问题。最后一个答案帮助我有了一个带有单个listview的侧抽屉。但是，现在我正在尝试设计类似以下的复杂侧面导航：

如您所见，我正在尝试在一个抽屉中添加多个小部件。有人可以指导我或帮助我获得愿望的输出吗？预先感谢。

Answer 1

您可以随意组成抽屉。一切都是Widget =）

Drawer(
  child: ListView(
    children: <Widget>[
      DrawerHeader(
        child: Text('Custom Header'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        leading: Icon(Icons.photo),
        title: Text('First layout'),
      ),
      ListTile(
        title: Text('Communicate'),
        //without leading =)
      ),
      ListTile(
        leading: Icon(Icons.share),
        title: Text('Share layout'),
      )
    ],
  ),
);

例如，您可以添加Divider或其他内容。您可以查看官方文档https://flutter.io/cookbook/design/drawer/

享受！

Answer 2

这是我的代码，现在您要做的只是更改需求小部件并明智地使用它

抽屉：抽屉（

          child: Container(
            color: Colors.orangeAccent,
                      child: ListView(
              
              children: <Widget>[
                
                UserAccountsDrawerHeader(
                  
                  accountName: Text("Akash Kumar", style: TextStyle(color: Colors.orangeAccent)),
                  accountEmail: Text("akashsingh@gmail.com", style: TextStyle(color: Colors.orangeAccent)),
                  currentAccountPicture: CircleAvatar(
                    backgroundImage: AssetImage('images/Capture.PNG'),
                  ),
                  decoration: BoxDecoration(color: Colors.white),
                ),
                ListTile(
                  leading: const Icon(Icons.trending_up),
                  title: Text("Trending News", style: TextStyle(color: Colors.white)),
                ),
                ListTile(
                  leading: const Icon(Icons.favorite_border),
                  title: Text("Favorite News!", style: TextStyle(color: Colors.white)),
                ),
                ListTile(
                  leading: const Icon(Icons.settings_applications),
                  title: Text("Settings", style: TextStyle(color: Colors.white)),
                ),
                const Divider(),
                ListTile(
                  leading: const Icon(Icons.exit_to_app),
                  title: Text("Logout!", style: TextStyle(color: Colors.white)),
                ),
              ],
            ),
          ),
        ),

Flutter：具有多个小部件的自定义抽屉

2 个答案: