如何在展开一个 ListView 的情况下垂直堆叠 ListView

Question

我正在构建一个简单的 Flutter 应用程序，其中两个 ListView 相互叠加。我试图将占用所有可用空间的第一个列表视图（文件列表）定位在第二个列表视图（标签列表）上方，它只占用显示标签所需的空间。

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

使用内部有多个 SliverLists 的 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");
        })),
      ),
    ],
  )