如何在Flutter中在同一屏幕上显示ListView和小部件？

Question

我正在尝试构建一个非常简单的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'),
            ),
          ],
        )
          ])),
      );
  }
}

谢谢！

- Hesal

Answer 1

在您的ListView周围应使用一个Expanded小部件。它的作用是将其子项（在本例中为ListView）展开到父项上可用的最大空间，不包括其他小部件占用的空间。

然后，当您想在底部添加输入时，只需在Column内放置普通小部件，但在ListView之外，因此列表将滚动，TextField将始终停留在页面底部。

这里是准备好底部输入的代码，但我建议您仔细了解Column、Row和Expanded小部件的作用。

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

- George

Answer 2

另一个更好的解决方案是将其包装到Flexible中：

Flexible:  
  child: 
    Listview.builder {
      // following two lines needed to make it work
      shrinkWrap: true
      physics: ScrollPhysics(),
      // the rest of your code
    }

记得这两行代码，可以避免Flutter的边界错误和警告，并正确地显示列表。

- us_david

Answer 3

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

- Alexey Podolian