如何在 Flutter 中的抽屉中创建组合的可滚动列表

Question

I wan´t to have a combination of text-widgets and lists inside a drawer . This content should be scrollable.

Here´s my sourcecode:

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

What I want to achive:

• The AppBar is fixed at the top
• The other content below should be scrollable

I´ve tried different ways with Expanded, Columns etc. but I wasn´t able to get this layout up and running as expected. Thanks in advance for any input!

Answer 1

you can use a single column with the listview places inside an expanded widget

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

yeilds

Answer 2

For short you can wrap your ListView with Expanded widget, it will fill all available space, but you will able to scroll it. In another case you should wrap ListView with Container and set height property.

For your example:

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