我的 Flutter 网页的滚动主体出现问题

Question

我正在尝试制作我的第一个 Flutter 网页。我想在顶部制作导航应用栏，在下面制作带有图片和文字的可滚动区域。我在重新调整我的页面时遇到了问题。我的页面正文没有滚动，它在底部溢出。我做错了什么？这是我的示例代码：

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TopBar(),
        SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 300,
                color: Colors.red,
              ),
              Container(
                height: 300,
                color: Colors.green,
              ),
              Container(
                height: 300,
                color: Colors.black,
              )
            ],
          ),
        )
      ],
    );
  }
}

Answer 1

您可以像这样组合 Column 和 ListView：

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      AppBar(),
      Expanded(
        child: ListView(
          children: [
            Container(
              height: 300,
              color: Colors.red,
            ),
            Container(
              height: 300,
              color: Colors.green,
            ),
            Container(
              height: 300,
              color: Colors.black,
            )
          ],
        ),
      ),
    ],
  );
}

我的 Flutter 网页的滚动主体出现问题

Problem with scrolling body of my Flutter web page

scroll

flutter

flutter-layout

flutter-web