如何将ListView添加到Flutter中的列?

我试图为我的扑动应用程序构建一个简单的登录页面。我已经成功构建了TextFields和登录/登录按钮。我想添加一个水平的ListView。运行代码时，元素消失了，如果没有ListView，也没问题。我怎样才能正确地做到这一点呢?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new ListView(scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    new RaisedButton(onPressed: null,
                    child: new Text("Facebook"),),
                    new Padding(padding: new EdgeInsets.all(5.00)),
                    new RaisedButton(onPressed: null,
                    child: new Text("Google"),)
                  ],)

                ],
              ),
            ),
            margin: new EdgeInsets.all(15.00),
          ),
        ),
      );

当前回答

您可以使用Flex和Flexible小部件。例如:

Flex(
direction: Axis.vertical,
children: <Widget>[
    ... other widgets ...
    Flexible(
        flex: 1,
        child: ListView.builder(
        itemCount: ...,
        itemBuilder: (context, index) {
            ...
        },
        ),
    ),
],

);

2020-04-30 09:18:38

其他回答

错误原因:

列在主轴方向(纵轴)扩展到最大，ListView也是如此。

解决方案:

你需要限制ListView的高度。有很多方法可以做到这一点，你可以选择最适合你的需要。

如果你想让ListView占用Column内的所有剩余空间，请使用Expanded。列( 孩子们:<部件> ( Expanded(// <——使用Expanded 孩子:列表视图(…), ） ), ）

如果你想限制你的ListView到一定的高度，使用sizebox。列( 孩子们:<部件> ( SizedBox ( height: 200， //约束高度。孩子:列表视图(…), ） ), ）

如果你的ListView很小，你可以尝试使用shrinkWrap属性。列( 孩子们:<部件> ( 列表视图( shrinkWrap: true， //设置） ), ）

如果你想让ListView尽可能小，使用Flexible with ListView. shrinkwrap: 列( 孩子们:<部件> ( Flexible(// <——使用Flexible 孩子:列表视图( shrinkWrap: true， //设置这个 )，） ), ）

2019-07-21 10:23:21

用扩展小部件包装你的列表视图

2021-12-22 12:19:01

您可以使用Flex和Flexible小部件。例如:

Flex(
direction: Axis.vertical,
children: <Widget>[
    ... other widgets ...
    Flexible(
        flex: 1,
        child: ListView.builder(
        itemCount: ...,
        itemBuilder: (context, index) {
            ...
        },
        ),
    ),
],

);

2020-04-30 09:18:38

实际上，当你阅读文档时，ListView应该在扩展小部件中，这样它才能工作。

  Widget build(BuildContext context) {
return Scaffold(
    body: Column(
  children: <Widget>[
    Align(
      child: PayableWidget(),
    ),
    Expanded(
      child: _myListView(context),
    )
  ],
));

}

2020-01-17 16:07:31

正如上面其他人所提到的，带扩展的Wrap listview是解决方案。

但是当你处理嵌套列时，你还需要将你的ListView限制在一定的高度(面对这个问题很多)。

如果有人有其他的解决方案，请在评论中提及或补充答案。

例子

  SingleChildScrollView(
   child: Column(
     children: <Widget>[
       Image(image: ),//<< any widgets added
       SizedBox(),
       Column(
         children: <Widget>[
           Text('header'),  //<< any widgets added
            Expanded(child: 
            ListView.builder(
              //here your code
               scrollDirection: Axis.horizontal,
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
            return Container();
                   } 
         )
        ),
        Divider(),//<< any widgets added
         ],
       ),

     ],
   ), 
  );

2020-04-17 22:03:04

如何将ListView添加到Flutter中的列?

推荐文章

最新文章

标签