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

我正在建立一个产品详细信息页面。如下面的代码和图像所示，当描述部分中有大量内容时，将发生底部溢出。我想知道如何使页面可滚动，我尝试过用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,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

要复制：将路径/To/image更改为：

tl；dr remove Expanded widgets->remove Stack->replace Column with ListView（用于可滚动性）

首先从树中删除

扩展的

小部件，因为您并不真正需要它们。如果可能，您应该使用

mainAxisAlignment

和

crossAxisAlignment

来定位小部件。这正是您应该如何处理将日期放在用户名旁边的问题

Expanded

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

创建一个小部件，用于扩展行、列或Flex so的子级 子控件填充flex小部件主控件上的可用空间 轴心国

然后删除

堆栈

小部件。如果您不这样做，那么它仍然可以工作，因为

堆栈

试图使其与定位的子级一样大，因此它将与您内部的

列

一样大。这是多余的

最后，将

列

替换为

列表视图

<代码>列并不真正关心它是否溢出或是否正在渲染。因此，如果您创建一个比屏幕大的列，它将简单地显示它，这将导致溢出。要解决这个问题，您可以将其包装为

SingleChildScrollView

，但我认为只使用

ListView

更合适

---

这里有一个关于flatter中布局系统的精彩解释：

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