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

有关更多信息，请参阅this question

Answer 2

1. 如果不使用 Column 而使用 ListView.builder 和 根据您显示小部件的索引。
2. 例如，在 0 索引上，您会显示 Container。
3. 这样您就不必使用任何不同的小部件进行滚动 并且根据您的要求，容器将随列表一起滚动。
4. 这样就不会出现任何溢出错误 就像您在使用 Column 时得到的一样。
5. ListView.builder 的优点是您的帖子将被延迟创建，这是在 Flutter 中创建 ListView 的有效方式。无论您有多少帖子，您的用户界面都不会滞后。
6. 起初这可能看起来像一个 hack，但根据您对容器也必须能够滚动的要求，这个解决方案对我来说很有意义，因为 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]; 
      },
    );
  }

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

Answer 3

有多种方法可以实现您想要的。唯一的问题是，如果您有大量帖子，则带有子帖子的列表视图（因为 shrinkWrap 设置为 true）将需要时间来计算其所需的高度，因为它必须填充其所有子帖子。

第一

ListView(
    children: <Widget>[
      Container(
          color: Colors.white.withOpacity(0.95),
          width: 400,
          height: 400,
          child: Text("")),
      ListView(
        physics: NeverScrollableScrollPhysics(),
        primary: false, 
        shrinkWrap: true,
        children: posts,
        ),
      ),
    ],
  ),

第二

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

Answer 4

使用 SingleChildScrollView，然后使用硬编码容器高度的 Container，然后使用列表视图构建器，这应该可以解决您的问题。

Answer 5

我尝试了以下方法：

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

这可行，但我希望容器具有动态高度和宽度？那可能吗？谢谢！