Instagram 风格的 Listview 在颤动中答案

【问题标题】：Instagram style Listview in flutterInstagram 风格的 Listview 在颤动中
【发布时间】：2020-12-26 18:00:43
【问题描述】：

我正在尝试在 Flutter 中创建 Instagram 样式的列表视图，其中顶部的水平滚动是故事，而下面的滚动部分是帖子的垂直滚动部分。我现在只是使用列表视图，而不是列表视图构建器。但不知何故，我的输出中没有垂直滚动。另外，在上面的列表视图中，容器大小采用父容器的大小 100，而不是高度 80。我该如何解决这个问题？

下面是代码：

body: Column(
        children: [
          Container(
            height: 100,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                SizedBox(
                  width: 10,
                ),
                Container(
                  width: 80,
                  height: 80,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 10,
                ),
                Container(
                  width: 80,
                  height: 80,
                  color: Colors.blue,
                ),
                SizedBox(
                  width: 10,
                ),
                Container(
                  width: 80,
                  height: 80,
                  color: Colors.green,
                ),
              ],
            ),
          ),
          SizedBox(
            height: 10,
          ),
          ListView(
            scrollDirection: Axis.vertical,
            children: [
              Container(
                height: 100,
                color: Colors.red,
              ),
              Container(
                height: 100,
                color: Colors.blue,
              ),
              Container(
                height: 100,
                color: Colors.green,
              ),
            ],
          )
        ],
      )

这是我的输出：

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

请检查下面的代码。

Column(
          children: [
            Container(
              height: 100,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.red,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.blue,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.green,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.green,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.green,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.green,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.green,
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10,
            ),
            SingleChildScrollView(
              child: Container(
                height: MediaQuery.of(context).size.height - 180,
                child: ListView(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  children: [
                    Container(
                      height: 100,
                      color: Colors.red,
                    ),
                    Container(
                      height: 100,
                      color: Colors.blue,
                    ),
                    Container(
                      height: 100,
                      color: Colors.green,
                    ),
                    Container(
                      height: 100,
                      color: Colors.red,
                    ),
                    Container(
                      height: 100,
                      color: Colors.blue,
                    ),
                    Container(
                      height: 100,
                      color: Colors.green,
                    ),
                    Container(
                      height: 100,
                      color: Colors.red,
                    ),
                    Container(
                      height: 100,
                      color: Colors.blue,
                    ),
                    Container(
                      height: 100,
                      color: Colors.green,
                    ),
                  ],
                ),
              ),
            )
          ],
        )

【讨论】：

感谢您的帮助，但我收到“RenderFlex 溢出”错误。我自己是初学者，不知道是什么原因。
感谢您的快速回复。
我还有一个关于上部水平滚动的最后一个问题。如何从每侧实现 10 的填充，以便可以整齐地排列高度和宽度为 80 的列表视图的容器。因为在上面的listview中，容器大小取父容器大小100，而不是高度80。
Padding( padding: const EdgeInsets.all(10.0), child: Container(), )

【解决方案2】：

用Expanded 小部件包裹垂直List View。

Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    Container(
      height: 100,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          SizedBox(
            width: 10,
          ),
          Container(
            width: 80,
            height: 80,
            color: Colors.red,
          ),
          SizedBox(
            width: 10,
          ),
          Container(
            width: 80,
            height: 80,
            color: Colors.blue,
          ),
          SizedBox(
            width: 10,
          ),
          Container(
            width: 80,
            height: 80,
            color: Colors.green,
          ),
        ],
      ),
    ),
    SizedBox(
      height: 10,
    ),
    Expanded(
      child: ListView(
        scrollDirection: Axis.vertical,
        children: [
          Container(
            height: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            color: Colors.blue,
          ),
          Container(
            height: 100,
            color: Colors.green,
          ),
        ],
      ),
    )
  ],
)

【讨论】：

在使用Expanded 小部件时将shrinkWrap 设置为true 没有意义，反之亦然。
@Hamed 谢谢你们。这工作得很好。当然，要使列表动态化，我将不得不使用构建器方式。只是在这里和那里进行实验，我是新手。再次感谢！
@void 似乎我无法在同一评论中标记两个人。不过还是谢谢！
@void 如果我希望水平滚动部分与垂直滚动一起滚动怎么办？谢谢！