Question

在滚动视图中，我想显示一个小部件，然后是一个列表，然后是一个小部件。在以下方面：

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Text("Top of ListView"),
          ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) => Text('Line $index')),
          Text("Below of ListView")
        ],
      ),
    );
  }

SingleChildScrollView的内容应为：

Text("Top of ListView"),
Text('Line 0'),
Text('Line 1'),
...
Text('Line 98'),
Text('Line 99'),
Text("Below of ListView")

当然，此代码无效，因为ListView的高度未定义。用ListView包装Expanded不是解决方案，因为我希望Text("Top of ListView")在我开始滚动时消失，而Text("Below of ListView")仅在到达底部时才出现（例如列表的第一项和最后一项）。

我的想法：

放入Text("Top of ListView")和Text("Below of ListView") ListView内部：此示例很容易完成，但在现实世界中，列表前后都不会只有一个小部件。凌乱且难以维护。
将列表项直接添加到Column：也就是重新实现ListView。
将ListView包裹在Container中，并将其固定高度与计算出的ListView高度相对应：我不知道如何测量儿童。

有什么想法吗？

Answer 1

您必须使用CustomScrollView来实现：

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildListDelegate([Text("Top of ListView")]),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Text('Line $index')
        childCount: 100,
      ),
    ),
    SliverList(
      delegate: SliverChildListDelegate([Text("Below of ListView")]),
    ),
  ],
),

Flutter：在列内完全包含一个ListView（无扩展）

1 个答案: