如何将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),
),
),
);
223468 次浏览
小开
最佳答案

您可以检查控制台输出。打印错误:

在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"),
)
],
),
)
小开

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

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

错误原因:

Column在主轴方向(垂直轴)扩展到最大大小，ListView也是如此。

解决方案:

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

  1. 如果你想让ListView占用Column内的所有剩余空间，请使用Expanded。

    Column(
children: <Widget>[
Expanded( //        <-- Use Expanded
child: ListView(...),
)
],
)

  1. 如果你想将你的ListView限制为某个height，使用SizedBox。

    Column(
children: <Widget>[
SizedBox(
height: 200, // Constrain height.
child: ListView(...),
)
],
)

  1. 如果你的ListView很小，你可以在它上尝试shrinkWrap属性。

    Column(
children: <Widget>[
ListView(
shrinkWrap: true, // Set this
)
],
)
  1. 如果你想让ListView尽可能小，使用Flexible和ListView.shrinkWrap:

    Column(
children: <Widget>[
Flexible( //        <-- Use Flexible
child: ListView(
shrinkWrap: true, // and set this
),
)
],
)
小开

我有SingleChildScrollView作为父组件，还有一个Column小部件，然后List View小部件作为最后一个子组件。

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

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

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

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

｝

小开

正如上面其他人所提到的，带扩展的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
],
),


],
),
);
小开

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

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

）;

小开

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

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

这里我们应该使用Flexible小部件，因为即使没有足够的小部件在全屏上呈现，它也只会占用扩展全屏时所需的空间。

小开

尝试使用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),
],
),
),
],
),
),
)
小开 
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("Login / Signup"),
),
body: new Container(
child: new Center(
child: ListView(
//mainAxisAlignment: MainAxisAlignment.center,
scrollDirection: Axis.vertical,
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),
),
),
);
小开 
  Column(
children: <Widget>[
Text('Leading text widget'),
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
),
Text('More widget'),
],
);

只使用

shrinkWrap: true,


physics: NeverScrollableScrollPhysics(),

listView中的属性

小开

另外，你可以尝试使用CustomScrollView

CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
final OrderModel order = _orders[index];


return Container(
margin: const EdgeInsets.symmetric(
vertical: 8,
),
child: _buildOrderCard(order, size, context),
);
},
childCount: _orders.length,
),
),
SliverToBoxAdapter(
child: _buildPreloader(context),
),
],
);

提示:_buildPreloader返回CircularProgressIndicator或Text

在我的情况下，我想在ListView下显示一些小部件。使用Column对我不起作用，因为列中的ListView周围的小部件总是显示“up”;在屏幕上，像“绝对位置”;

对不起，我的英语不好

小开

你需要做两件事:

  • 将Column包裹在SingleChildScrollView里面
  • 在ListView中添加shrinkWrap: true和physics: NeverScrollableScrollPhysics()

为什么有效:

根据我的理解，NeverScrollableScrollPhysics禁用ListView的滚动。 因此，scroll与SingleChildScrollView一起工作。 如果我是错的，评论如下 

SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Filter'),
ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: rides.length,
itemBuilder: (BuildContext context, int index) {
# return some widget
}
),
小开

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

enter image description here

我有非常小的&直接回答，把listview放到列里面会迫使列无限展开，这基本上是错误的。

现在如果你像其他人建议的那样在listview中放入physics: 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}"),
),
),
),
),
],
)

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

代码的解释:

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

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

小开

就我而言，我在吸毒

  • singleChildScrollView
  • 列
  • 容器
    • <李> FutureBuilder 李- Listview < / >

，我想滚动整个列的最后一个滚动视图 添加

physics: NeverScrollableScrollPhysics(),

列表视图中的这一行。

小开

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


提交答案