如何在Flutter中将ListView添加到列中？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试为Flutter应用程序构建一个简单的登录页面。我已经成功构建了TextFields和Login /

Signin按钮。我想添加一个水平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),
          ),
        ),
      );

回答：

您可以检查控制台输出。它显示错误：

在performResize（）期间引发了以下断言：水平视口的高度不受限制。视口在横轴上扩展以填充其容器，并约束其子代以使其在横轴上的范围匹配。在这种情况下，将为水平视口提供无限量的垂直空间以进行扩展。

您需要在水平列表中添加高度限制。例如，将容器包装在高度以下的容器中：

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)

以上是 如何在Flutter中将ListView添加到列中？ 的全部内容， 来源链接： utcz.com/qa/398049.html

回到顶部