flutter - 如何在颤动的抽屉中添加分隔符和字幕

Question

我想在导航抽屉中添加字幕和分隔符，如下图截图所示。

我已经为导航抽屉编写了下面的代码，但找不到可以放置字幕和分隔符的位置。

drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: const <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),

标签： flutterdartmaterial-design

Answer 1

有一个称为它的小部件，Divider 您可以简单地添加一个 Divider 作为 字幕之一，您可以添加一个childrens小部件并设置它的样式，以使用ListViewTextTextStyle

drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: const <Widget>[
            DrawerHeader(...),
            Divider(), //here is a divider
            Text("subtitle", style: TextStyle(...)),
            ListTile(...),
            ListTile(...),
            Divider(), //here is a divider
            ListTile(...),
            //rest of your items
          ],
        ),
      ),