如何将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),
          ),
        ),
      );

当前回答

就我而言，我在吸毒

singleChildScrollView 列容器 FutureBuilder ——列表视图

我想滚动整个列的最后一个滚动视图对于这个添加

physics: NeverScrollableScrollPhysics(),

列表视图中的这一行。

2021-08-18 18:58:26

其他回答

尝试使用Slivers:

Container(
    child: CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 1"),
              HeaderWidget("Header 2"),
              HeaderWidget("Header 3"),
              HeaderWidget("Header 4"),
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
              BodyWidget(Colors.green),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.green),
              BodyWidget(Colors.yellow),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
      ],
    ),
  ),
)

2020-07-16 17:08:15

由于ListView本质上有一个无限的高度，它会导致一个错误。

 Column(
  children: <Widget>[
    Flexible(
      child: ListView(...),
    )
  ],
)

这里我们应该使用Flexible小部件，因为它只会占用它所需要的空间，而Expanded则会占用全屏，即使没有足够的小部件来呈现全屏。

2020-06-13 08:57:50

我也有这个问题。我的解决方案是使用扩展小部件来扩大剩余空间。

Column(
  children: <Widget>[
    Expanded(
      child: horizontalList,
    )
  ],
);

2018-03-27 07:20:46

我有SingleChildScrollView作为父，一个列小部件，然后列表视图小部件作为最后一个子部件。

在列表视图中添加这些属性对我有用。

  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  scrollDirection: Axis.vertical,

2019-12-26 07:02:29

[解决方案预览]-[列表项可滚动，但标题固定]

我有一个非常小而直接的答案，看到将listview放在列内将迫使列无限扩展，这基本上是一个错误的事情。

现在如果你把物理:NeverScrollableScrollPhysics()，就像其他人建议的那样，在listview中，那么如果你禁用了listview内部的滚动，有什么意义呢?

有一个简单的解决办法，坦率地说，我通过撞击和试验来解决这个问题。代码后让我给大家做个小解释。

Column(
      children: [
        Text(
          "All Bookings",
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600, color: Colors.brown[700]),
        ),
        Expanded(
          child: Container(
            margin: EdgeInsets.only(top: 24),
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (BuildContext context, int index) => ListTile(
                title: Text("List Item ${index + 1}"),
              ),
            ),
          ),
        ),
      ],
    )

我有要求有标题内列作为第一个元素，然后放一个列表视图，以便用户可以有滚动列表。这是一种通用的需求。你也可以把这个放在底页或模态中。

代码的解释:

我把第一个子作为标题在列内ok(我不想滚动，我想它是固定的) 我在列内扩展了子列，这就像获得列中所有的“剩余空间”。在我保留的容器(只是在标题和列表视图之间放一些空间)这是可选的，你可以删除容器，它仍然会工作。 Listview的约束很好它不会在列中无限拉伸。作为扩展小部件已经约束它。

请纠正我，如果我错了，或者如果这段代码不工作(它工作到现在没有错误:)

2021-03-16 16:22:13

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

推荐文章

最新文章

标签