简体   繁体   English

使 flutter 页面可滚动

[英]Make a flutter Page scrollable

Hey I am currently trying to make a page scrollable in flutter/dart.嘿,我目前正在尝试使页面在颤振/飞镖中可滚动。 The problem I have is that the structure is different from anything that I could find online.我遇到的问题是该结构与我在网上可以找到的任何东西都不同。 It currently looks like that:目前看起来是这样的:

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

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

      Container(...),

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

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

I want to make the Row(...) and the second Container(...) scrollable now.我想让 Row(...) 和第二个 Container(...) 现在可以滚动。 I couldn't figure it out.我想不通。 Hopefully you can help me with it!希望你能帮助我! Thanks in advance提前致谢

Wrap your Row and Container in a Column , then wrap that Column in a SingleChildScrollView ;将您的RowContainerColumn中,然后将该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(...),
            ],
          ),
        )
      ],
    ),
  );
}

ps as of Dart 2.0 you no longer need the new keyword in front of your Scaffold . ps 从 Dart 2.0 开始,您不再需要在Scaffold前面new关键字。

Try Flutter ListView.试试 Flutter 列表视图。 Something like就像是

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')),
    ),
  ],
)

For details, have a look at the following link ListView有关详细信息,请查看以下链接ListView

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM