如何在Flatter中沿同一屏幕上的ListView显示小部件？

我正在尝试构建一个非常简单的ToDo应用程序。它由一个

TextField

和屏幕顶部的一个

按钮（一个表单）组成，允许用户向
TextField
下的
列表视图添加项目

我可以显示
文本字段
和
按钮
，也可以显示
列表视图
，但当我试图同时显示这两个字段时，屏幕是空的

我错过什么了吗？我试图将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>[
            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'),
            ),
          ],
        )
          ])),
      );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“Mon应用程序”，
家：脚手架(
appBar:appBar(
标题：文本（“我的应用程序”）
),
正文：专栏(
儿童：[
列表视图(
儿童：[
列表砖(
前导：图标（Icons.map），
标题：文本（“地图”），
),
列表砖(
领先：图标（图标、相册），
标题：文本（“相册”），
),
列表砖(
前导：图标（Icons.phone），
标题：文本（“电话”），
),
],
)
])),
);
}
}

谢谢
 列表视图的垂直视口被赋予了无限高。用
扩展的
小部件包装您的
列表视图

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'),
                  ),
                ],
              ),
            )
          ])),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“Mon应用程序”，
家：脚手架(
appBar:appBar（标题：文本（“我的应用”），
正文：列（子项：[
升起按钮（按下时：（）{}），
扩大(
子：ListView(
儿童：[
列表砖(
前导：图标（Icons.map），
标题：文本（“地图”），
),
列表砖(
领先：图标（图标、相册），
标题：文本（“相册”），
),
列表砖(
前导：图标（Icons.phone），
标题：文本（“电话”），
),
],
),
)
])),
);
}
}
您应该在ListView周围使用一个扩展的
小部件。is所做的是扩展其子部件（在本例中为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(
            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
                      },
                    )
                  ],
                )
              ],
          ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“Mon应用程序”，
家：脚手架(
appBar:appBar(
标题：文本（“我的应用程序”）
),
正文：专栏(
mainAxisSize:mainAxisSize.max，
儿童：[
扩大(
子：ListView(
儿童：[
列表砖(
前导：图标（Icons.map），
标题：文本（“地图”），
),
列表砖(
领先：图标（图标、相册），
标题：文本（“相册”），
),
列表砖(
前导：图标（Icons.phone），
标题：文本（“电话”），
),
],
),
),
划船(
儿童：[
扩大(
孩子：TextField(
装饰：输入装饰(
hintText：“该怎么办？”
),
),
),
图标按钮(
图标：图标（Icons.send），
已按下：（）{
//做点什么
},
)
],
)
],
),
),
);
}
}