如何在Flutter中沿着ListView在同一屏幕上显示一个widget？
如何在Flutter中沿着ListView在同一屏幕上显示一个widget？
提问于 2019-01-07 05:49:38
我正在尝试构建一个非常简单的ToDo应用程序。它由屏幕顶部的TextField和Button (表单)组成，允许用户向TextField下的ListView添加项目。
我可以显示TextField和Button，也可以显示ListView，但是当我尝试同时显示这两个时，屏幕是空的。
我是不是遗漏了什么？我尝试将ListView显示到一个Column小部件中，但它看起来不起作用。
以下是我不带表单的简短代码：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: "Mon app",
home: Scaffold(
appBar: AppBar(
title: Text("My app")
),
body: Column(
children: <Widget>[
ListView(
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'),
),
],
)
])),
);
}
}谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-07 06:09:44
您应该在ListView周围使用Expanded小部件。它所做的是扩展它的子部件(在本例中是ListView)，以适合父部件上的最大可用空间，不包括其他小部件占用的空间。
然后，当您想要在底部添加输入时，您可以只将普通的小部件放在Column内，但放在ListView外，这样列表将滚动，TextField将始终停留在页面底部。
下面是准备好底部输入的代码，但我建议您仔细了解列、行和扩展的小部件是怎么回事。
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: "Mon app",
home: Scaffold(
appBar: AppBar(
title: Text("My app")
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListView(
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'),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "What to do?"
),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: (){
//do something
},
)
],
)
],
),
),
);
}
}Stack Overflow用户
发布于 2019-01-07 06:01:20
ListView的垂直视口具有无界高度。使用Expanded小部件包装ListView
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Mon app",
home: Scaffold(
appBar: AppBar(title: Text("My app")),
body: Column(children: <Widget>[
RaisedButton(onPressed: () {}),
Expanded(
child: ListView(
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'),
),
],
),
)
])),
);
}
}Stack Overflow用户
发布于 2021-10-09 20:32:42
另一个更好的解决方案是将其变形为Flexible：
Flexible:
child:
Listview.builder {
// following two lines needed to make it work
shrinkWrap: true
physics: ScrollPhysics(),
// the rest of your code
}记住两条线，这两条线是为了避免边界错误和颤动警告，并让列表正确显示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54066268
复制相关文章
相似问题