使颤动的页面可滚动答案

【问题标题】：Make a flutter Page scrollable使颤动的页面可滚动
【发布时间】：2020-08-22 21:29:24
【问题描述】：

嘿，我目前正在尝试使页面在颤振/飞镖中可滚动。我遇到的问题是该结构与我在网上可以找到的任何东西都不同。目前看起来是这样的：

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,

  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[

      Container(...),

      SizedBox(height: 10.0),
      Row(...),

      Container(...),
    ],
  ),
);
}

我想让 Row(...) 和第二个 Container(...) 现在可以滚动。我想不通。希望你能帮助我！提前致谢

【问题讨论】：

标签： flutter dart scroll flutter-layout dart-pub

【解决方案1】：

将Row 和Container 包装在Column 中，然后将Column 包装在SingleChildScrollView 中；

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomPadding: false,
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(),
        SizedBox(height: 10.0),
        SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Row(...),
              Container(...),
            ],
          ),
        )
      ],
    ),
  );
}

附言从 Dart 2.0 开始，您不再需要在 Scaffold 前面加上 new 关键字。

【讨论】：

【解决方案2】：

试试 Flutter ListView。类似的东西

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

详情请看以下链接ListView

【讨论】：