如何在 Flutter 的 Drawer 中创建一个组合的、可滚动的 List答案

【问题标题】：How to create a combined, scrollable List in a Drawer in Flutter如何在 Flutter 的 Drawer 中创建一个组合的、可滚动的 List
【发布时间】：2020-03-16 20:23:01
【问题描述】：

我不想在抽屉里有一个文本小部件和列表的组合。此内容应该是可滚动的。

这是我的源代码：

 return Drawer(
      child: Expanded(
        child: Column(
          children: <Widget>[
            AppBar(title: Text('Test'),),
            Text('Example 1:'),
            ListView.separated(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: _brands.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                    ....);
              },
              separatorBuilder: (BuildContext context, int index) =>
                  const Divider(height: 5),
            ),
            Text('Another heading')
          ],
        ),
      ),
    );

我想要达到的目标：

AppBar 固定在顶部
下面的其他内容应该是可滚动的

我尝试了扩展、列等不同的方法，但我无法按预期启动和运行此布局。提前感谢您的任何意见！

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以在展开的小部件内使用带有列表视图位置的单列

return Drawer(
      child: Column(
        children: <Widget>[
          AppBar(),
          Expanded(
            child: ListView.separated(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: 100,
              itemBuilder: (context, index) {
                return Text(index.toString());
              },
              separatorBuilder: (BuildContext context, int index) =>
                  const Divider(height: 5),
            ),
          ),
        ],
      ),
    );

收益

【讨论】：

【解决方案2】：

简而言之，您可以用Expanded 小部件包装您的ListView，它会填满所有可用空间，但您可以滚动它。在另一种情况下，您应该使用 Container 包装 ListView 并设置 height 属性。

你的例子：

Drawer(
        child: Column(
          children: <Widget>[
            AppBar(title: Text('Test'),),
            Text('Example 1:'),
            Expanded(
              child: ListView.separated(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: List.generate(100, (index) => index).length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(leading: Text("$index"),);
                },
                separatorBuilder: (BuildContext context, int index) =>
                const Divider(height: 5),
              ),
            ),
            Text('Another heading')
          ],
        ),
      ),

【讨论】：