entityMap|blocks|key|a87ja|text|ListView的垂直视口具有无界高度。使用Expanded小部件包装ListView|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|706m4|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'),
++++++++++++++++++),
++++++++++++++++],
++++++++++++++),
++++++++++++)
++++++++++])),
++++);
++}
}|code-block|syntax|javascript|50bal^0|0|8|M|8|Z|8|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@$A|N|B|O|C|D]|$A|P|B|Q|C|D]|$A|R|B|S|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|T|9|@]|E|@]|F|$J|K]]|$2|L|4|-4|6|7|8|U|9|@]|E|@]|F|$]]]]

Vertical viewport for <code>ListView</code> was given unbounded heigh. Wrap your <code>ListView</code> with <code>Expanded</code> widget

<pre><code>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: &lt;Widget&gt;[
 RaisedButton(onPressed: () {}),
 Expanded(
 child: ListView(
 children: &lt;Widget&gt;[
 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'),
 ),
 ],
 ),
 )
 ])),
 );
 }
}
</code></pre>

entityMap|blocks|key|725a4|text|您应该在ListView周围使用Expanded小部件。它所做的是扩展它的子部件(在本例中是ListView)，以适合父部件上的最大可用空间，不包括其他小部件占用的空间。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|cuuop|然后，当您想要在底部添加输入时，您可以只将普通的小部件放在Column内，但放在ListView外，这样列表将滚动，TextField将始终停留在页面底部。|cl39o|下面是准备好底部输入的代码，但我建议您仔细了解列、行和扩展的小部件是怎么回事。|1vm0c|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
++++++++++++++++++++++},
++++++++++++++++++++)
++++++++++++++++++],
++++++++++++++++)
++++++++++++++],
++++++++++),
++++++),
++++);
++}
}|code-block|syntax|javascript|91s2m^0|G|8|0|T|6|14|8|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@$A|R|B|S|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|T|9|@$A|U|B|V|C|D]|$A|W|B|X|C|D]]|E|@]|F|$]]|$2|I|4|J|6|7|8|Y|9|@]|E|@]|F|$]]|$2|K|4|L|6|M|8|Z|9|@]|E|@]|F|$N|O]]|$2|P|4|-4|6|7|8|10|9|@]|E|@]|F|$]]]]

You should use an <code>Expanded</code> widget around your ListView. What is does is to expand its child (in this case, the ListView) to fit the maximum available space on the parent, excluding the space taken by other widgets.

Then, when you want to add the input on the bottom, you can just put the normal widget there inside the <code>Column</code>, but outside the <code>ListView</code>, so the list will scroll and the TextField will always stay on the bottom of the page.

Here's the code with the bottom input ready, but I suggest you try to understand carefully what's going on with Columns, Rows and Expanded widgets.

<pre><code>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: &lt;Widget&gt;[
 Expanded(
 child: ListView(
 children: &lt;Widget&gt;[
 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: &lt;Widget&gt;[
 Expanded(
 child: TextField(
 decoration: InputDecoration(
 hintText: "What to do?"
 ),
 ),
 ),
 IconButton(
 icon: Icon(Icons.send),
 onPressed: (){
 //do something
 },
 )
 ],
 )
 ],
 ),
 ),
 );
 }
}
</code></pre>

entityMap|blocks|key|8qh5r|text|另一个更好的解决方案是将其变形为Flexible：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5s63g|Flexible:++
++child:+
++++Listview.builder+{
++++++//+following+two+lines+needed+to+make+it+work
++++++shrinkWrap:+true
++++++physics:+ScrollPhysics(),
++++++//+the+rest+of+your+code
++++}|code-block|syntax|javascript|e82ek|记住两条线，这两条线是为了避免边界错误和颤动警告，并让列表正确显示。|cuede^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|L|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|M|9|@]|A|@]|B|$]]|$2|J|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

Another better solution is to warp it to Flexible:
<pre><code>Flexible: 
 child: 
 Listview.builder {
 // following two lines needed to make it work
 shrinkWrap: true
 physics: ScrollPhysics(),
 // the rest of your code
 }
</code></pre>
Remember the two lines that are needed to avoid boundary error and warning from flutter and to have the list display correctly.

I'm trying to build a very simple ToDo app. It consists of a <code>TextField</code> and a <code>Button</code> (a form) on the top of the screen that allow the user to add items to the <code>ListView</code> that is just under the <code>TextField</code>.

I'm capable to display the <code>TextField</code> and the <code>Button</code>, and I'm also capable to display a <code>ListView</code>, but when I try to display both at the same time, the screen is empty.

Am I missing something? I try to display the ListView into a Column widget but it looks like it doesn't work.

Here is my short code without the form:

<pre><code>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: &lt;Widget&gt;[
 ListView(
 children: &lt;Widget&gt;[
 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'),
 ),
 ],
 )
 ])),
 );
 }
}
</code></pre>

Thanks!

How to show a widget along a ListView on the same screen in Flutter?

 我正在尝试构建一个非常简单的ToDo应用程序。它由屏幕顶部的TextField和Button (表单)组成，允许用户向TextField下的ListView添加项目。 我可以显示TextField和Button，也可以显示ListView，但是当我尝试同时显示这两个时，屏幕是空的。 我是不是遗漏了什么？我尝试将Lis...

问如何在Flutter中沿着ListView在同一屏幕上显示一个widget？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Flutter中沿着ListView在同一屏幕上显示一个widget？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Flutter中沿着ListView在同一屏幕上显示一个widget？
EN