dart - 如何垂直扩展具有一个ListView的ListView

Question

我正在构建一个简单的Flutter应用程序，彼此叠加两个ListView。我试图将占据所有可用空间的第一个列表 View (文件列表)放置在第二个列表 View (标签列表)上方，而第二个列表 View (标签列表)仅占用显示标签所需的空间。

Here is a mockup of the desired design (image)

我尝试将列表添加到Stack小部件，但是列表重叠。我也尝试过将ListView添加到两个Expanded小部件中，但这也不起作用。

This is what my app looks like使用Stack小部件。

这是所有使用的代码(如果要运行，请复制并粘贴到默认项目main.dart中)

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage();

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        alignment: Alignment.bottomCenter,
        children: [
          new ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return new ListTile(
                title: new Text("File $index"),
              );
            },
          ),
          new Text("Tags"),
          new ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: 10,
            itemBuilder: (context, index) {
              return new Chip(label: new Text("Tag $index"));
            }
          ),
        ],
      ),
    );
  }
}

有人知道如何在Flutter where you have two vertical ListView 's with some space between them中进行此布局吗？

Answer 1

使用内部带有多个SliverList的CustomScrollView:

  CustomScrollView(
    slivers: <Widget>[
      SliverList(
        delegate: SliverChildListDelegate(List<Text>.generate(7, (int i) {
          return Text("List 1 Item $i");
        })),
      ),
      SliverToBoxAdapter(
        child: Text('Tags'),
      ),
      SliverList(
        delegate: SliverChildListDelegate(List<Text>.generate(3, (int i) {
          return Text("List 2 Item $i");
        })),
      ),
    ],
  )