Flutter：Container + ListView 可滚动

Question

我有一个包含容器 + listView 的页面。现在 listView 是可滚动的，但我希望整个页面都是可滚动的。（所以如果用户滚动，容器就会“离开”）

Column(
        children: <Widget>[
          Container(
              color: Colors.white.withOpacity(0.95),
              width: 400,
              height: 400,
              child: Text("")),
          ListView(
              children: posts,
            ),
        ],
      ),

这可能吗，如何实现？

谢谢！

Answer 1

你可以用一个包裹整个页面 SingleChildScrollView

这是一个例子：

SingleChildScrollView( // <- added
    child: Column(
        children: <Widget>[
          Container(
              color: Colors.white.withOpacity(0.95),
              width: 400,
              height: 400,
              child: Text("")),
          ListView(
              shrinkWrap: true, // <- added
              primary: false, // <- added
              children: posts,
            ),
        ],
      ),
);

有关更多信息，请参阅此问题

Answer 2

1. 如果您不使用 Column 并使用ListView.builder并根据索引显示小部件怎么办。
2. 例如，在 0 索引上显示Container.
3. 这样您就不必使用任何不同的小部件进行滚动，并且根据您的要求，容器将随列表一起滚动。
4. 这样，您就不会像使用Column.
5. ListView.builder 的另一个优点是您的帖子将被懒惰地创建，这是在 Flutter 中创建 ListView 的有效方法。无论您有多少帖子，您的用户界面都不会滞后。
6. 这起初可能看起来像一个黑客，但根据您的要求，容器也必须能够滚动，这个解决方案对我来说很有意义，因为 Container 可以被视为列表的第一个元素。

让我知道它是否适合你。

以下是供您参考的工作代码：

@override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: posts.length + 1, // +1 because you are showing one extra widget.
      itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
          return Container(
              color: Colors.white.withOpacity(0.95),
              width: 400,
              height: 400,
              child: Text(""));
        }
        int numberOfExtraWidget = 1; // here we have 1 ExtraWidget i.e Container.
        index = index - numberOfExtraWidget; // index of actual post.
        return posts[index]; 
      },
    );
  }

我希望这对你有用，如有任何疑问，请发表评论。