Flutter - 另一个小部件下方的位置列表视图

Posted

技术标签:

【中文标题】Flutter - 另一个小部件下方的位置列表视图【英文标题】:Flutter - Position list view below another widget 【发布时间】:2018-08-23 09:56:23 【问题描述】:

我从 Flutter 开始,我遇到了一个在构建时遇到问题的布局,下面是一个视觉示例:

我已经尝试过类似的方法:

        class MyApp extends StatelessWidget 
          @override
          Widget build(BuildContext context) 
            return new MaterialApp(
              title: 'Welcome to Flutter',
              home: new Scaffold(
                  appBar: new AppBar(
                    title: new Text('App'),
                  ),
                  body: new Column(
                      children: <Widget>[
                        new Text('LISTA',
                            style: new TextStyle(
                              fontSize: 15.2,
                              fontWeight: FontWeight.bold,
                            )
                        ),
                        new Container(
                          height: 200.0,
                          child: new ListView(
                            children: <Widget>[
                              new RaisedButton(
                                onPressed: null,
                                child: new Text("text button"),
                              ),
                              new Padding(padding: new EdgeInsets.all(5.00)),
                              new RaisedButton(
                                onPressed: null,
                                child: new Text("text button 2"),
                              )
                            ],
                          ),
                        )
                      ]
                  )
              ),
            );
          
        

但对于 Container,它需要一个高度,而我需要它来占据屏幕的其余部分。

【问题讨论】:

Creating a Sticky Site Footer的可能重复 您想要的是第二种解决方案,即使用Expanded 小部件的解决方案。 扩展解决我的问题谢谢! 您能否在答案中显示代码,我遇到了同样的问题并且扩展也无法正常工作。 @AmmyKang 我发布了代码作为答案 【参考方案1】:
new Column(
    children: <Widget>[
        new Text('LISTA', style: new TextStyle(
            fontSize: 15.2,
            fontWeight: FontWeight.bold,
        )),
        new Expanded(
            child: new Container(
                decoration: new BoxDecoration(color: Colors.blue),
                child: new ListView(
                    children: <Widget>[
                        new RaisedButton(
                            onPressed: null,
                            child: new Text("text button"),
                        ),
                        new Padding(padding: new EdgeInsets.all(5.00)),
                        new RaisedButton(
                            onPressed: null,
                            child: new Text("text button 2"),
                        )
                    ],
                ),
            )
        )
    ]
)

【讨论】:

Container小部件中的'height'参数不是必须的 Tks Archintha :)

以上是关于Flutter - 另一个小部件下方的位置列表视图的主要内容,如果未能解决你的问题,请参考以下文章

如何在按钮单击 FLUTTER 上刷新列表小部件数据

在Flutter中刷新小部件外的列表视图?

Flutter ListView 与不同的小部件和列表项

Flutter:故意隐藏键盘下的Stack项目

如何使用 Flutter 中的 Stack 小部件部分覆盖视图

使用 Dart 和 Flutter,我如何将动态小部件中的数据保存到另一个列表中的地图列表中