如何使页面在以下结构中可滚动（Flutter）答案

【问题标题】：How to make the page scrollable in the following structure (Flutter)如何使页面在以下结构中可滚动（Flutter）
【发布时间】：2021-03-18 19:59:07
【问题描述】：

我正在构建一个产品详细信息页面。如下面这段代码和图片所示，当描述部分的内容很多时，就会发生底部溢出。我想知道如何使页面可滚动，我尝试用 SingleChildScrollView 包装堆栈，但这绝对不适用于我的情况。任何人都可以帮助我吗？非常感谢！！！！！！

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          buildBody("path/to/image", size),
        ],
      ),
    );
  }

  Positioned buildBody(String imagePath, Size size) {
    return Positioned.fill(
      child: Column(
        children: [
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 60, horizontal: 30),
              color: Colors.green,
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.center,
                    child: Hero(
                      tag: 1,
                      child: Image.asset(
                        imagePath,
                        width: size.width * 0.7,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.white,
              child: Column(
                children: [
                  SizedBox(
                    height: 100,
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        CircleAvatar(),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Anvesha Shandilya',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                            Text(
                              'Owner',
                              style: TextStyle(
                                color: fadedBlack,
                              ),
                            ),
                          ],
                        ),
                        Expanded(child: Container()),
                        Text(
                          'Dec 16, 2020',
                          style: TextStyle(
                            color: fadedBlack,
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    child: Text(
                      'A lot of content..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................',
                      style: TextStyle(
                        color: fadedBlack,
                        height: 1.7,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Error: Bottom Overflowed

重现：将路径/到/图像更改为：A image can be used with the code:

【问题讨论】：

您能否编辑您发布的代码 sn-p 以使其可独立于项目的其余部分进行编译？我有编译错误，即使在运行它之后，它看起来也与您的屏幕截图不同。
@mightybruno 对不起！我已经编辑过了。记得编辑图片路径

标签： flutter dart flutter-layout

【解决方案1】：

tl;dr remove Expanded widgets -> remove Stack -> replace Column with ListView (for scrollability)

首先从树中删除 Expanded 小部件，因为您并不真正需要它们。如果可能，您应该使用mainAxisAlignment 和crossAxisAlignment 来定位您的小部件。这正是您应该如何处理将日期放在用户名旁边的方式。

Expanded 文档说明了您可以使用哪些小部件：

创建一个扩展 Row、Column 或 Flex 的子项的小部件，以便孩子沿着 flex 小部件的 main 填充可用空间轴。

然后删除Stack 小部件。如果你不这样做，那么它仍然可以工作，因为Stack 试图变得和它定位的孩子一样大，所以它会变得和你里面的Column 一样大。这是多余的。

最后但同样重要的是，将Column 替换为ListView。 Column 并不真正关心它是否溢出或是否被渲染。因此，如果您创建的 Column 比屏幕大，它只会显示它，这会导致溢出。要解决这个问题，您可以将其包装为 SingleChildScrollView，但我认为只使用 ListView 更合适。

这是对 Flutter 中布局系统的惊人解释：https://flutter.dev/docs/development/ui/layout/constraints

【讨论】：