如何在 Flutter 中制作页面的可滚动部分？答案

【问题标题】：How to make scrollable part of page in Flutter?如何在 Flutter 中制作页面的可滚动部分？
【发布时间】：2023-01-30 04:09:29
【问题描述】：

我无法滚动以红色突出显示的部分

这是我的代码：

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          _headerWidget(),
          _actionWidget(),
          _backgroundWidget(),
          _bottomBar()
        ],
      )
    );
  }
}
Widget _bottomBar() => Positioned();
Widget _headerWidget()=> Positioned();
Widget _actionWidget() => Positioned();

// need scrolling in below widget !
Widget _backgroundWidget() => Positioned(
   top: 320,
   bottom: 0,
   left: 0,
   right: 0,
   child: Column( 
     crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              Card(...),
              Card(...)
           ]
      )
);

我想滚动页面的这一部分 _backgroundWidget() 我尝试将高度与 ListView 放在一起，但它没有用，所以我回到了初始代码。

【问题讨论】：

您是否尝试过将列包装在 SingleChildScrollView 中？
是的，但它不起作用
ListView（使用 shrinkwrap = true）而不是 Column 怎么样？

标签： flutter dart listview scroll singlechildscrollview

【解决方案1】：

如果您使用列表视图，则使用属性 shrinkWrap:true。但我认为 Singlechilscrollview 会为你工作。首先尝试用 Singlechildscrollview 包装一个容器，然后容器的孩子将是列。为了测试目的，给你的容器一个特定的高度。

【讨论】：

【解决方案2】：

用 ListView 包装您的 Column 小部件

Widget _backgroundWidget() =>
    Positioned(
        top: 320,
        bottom: 0,
        left: 0,
        right: 0,
        child: ListView(
          shrinkWrap: true,
          children: [
            Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Card(...),
                  Card(...)
                ]
            ),
          ],
        )
    );

【讨论】：