flutter - 为什么我的 TextField 和 List 在两者一起 flutter 时不显示

Question

这周我刚刚开始学习 Flutter!，在观看了 5 个小时的视频后，我决定使用我的知识来完成一个待办事项列表是一个好主意。我在布局顺序方面遇到了一些问题，因为我习惯于对原生和 html 使用react。所以我有一个 TextField ，用户可以在其中键入任务然后提交它，以便它可以出现在此文本字段下方的添加任务列表中。在这个过程中，我意识到代码没有显示任何东西。如果删除了 TextField 或删除了列表，则代码只会显示一些内容，但看起来它们不能在同一页面中。我该如何解决这个问题？
我当前的代码不显示任何内容(main.dart)

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<String> _toDoItems = [];

  void _addToDoItem(String task) {
    if(task.length > 0) {
      setState(() {  
        _toDoItems.add(task);
      });
    }
  }

  Widget _buildToDoItem(String toDoText) {
    return ListTile(
      title: Text(toDoText)
    );
  }

  Widget _buildToDoList() {
    return ListView.builder(
      itemBuilder: (context, index) {
        if (index < _toDoItems.length) {
          return _buildToDoItem(_toDoItems[index]);
        }
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50),
          child: AppBar(
            centerTitle: true,
            backgroundColor: Colors.red,
            title: Text('To Do List', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold,),),
          )
        ),
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: TextField(
                  autofocus: true,
                  onSubmitted: (val) {
                    _addToDoItem(val);
                  },
                ),
            ), _buildToDoList(),
            
          ],
        ),
    
      ),
    );
  }
}

现在下面的代码是显示列表但不显示 TextField 的代码

body:  _buildToDoList(),

显示 TextField 但不显示 List 的代码

body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: TextField(
                  autofocus: true,
                  onSubmitted: (val) {
                    _addToDoItem(val);
                  },
                  decoration: InputDecoration(
                    hintText: 'Add a tak here...',
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                      borderSide: BorderSide(color: Colors.red, width: 2),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                      borderSide: BorderSide(color: Colors.red, width: 1.5),
                    ),
                  ),
                ),
            ), // the list widget here is removed so that the text field could appear
            
          ],
        ),

对于文本字段旁边的按钮:

body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: Row(children: [
                  TextField(
                    autofocus: true,
                    onSubmitted: (val) {
                      _addToDoItem(val);
                    },
                    decoration: InputDecoration(
                      hintText: 'Add a tak here...',
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),
                        borderSide: BorderSide(color: Colors.red, width: 2),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),
                        borderSide: BorderSide(color: Colors.red, width: 1.5),
                      ),
                    ),
                  ),
                  RaisedButton(
                    child: Text('ADD'),
                    onPressed: null,
                  ),
                ],)
                
            ), 
            _buildToDoList(),    
          ],
        ),

Answer 1

您可以在下面复制粘贴运行完整代码
您可以换行 ListView与 Expanded代码片段

Widget _buildToDoList() {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          if (index < _toDoItems.length) {
            return _buildToDoItem(_toDoItems[index]);
          }
        },
      ),
    );
  }

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<String> _toDoItems = [];

  void _addToDoItem(String task) {
    if (task.length > 0) {
      setState(() {
        _toDoItems.add(task);
      });
    }
  }

  Widget _buildToDoItem(String toDoText) {
    return ListTile(title: Text(toDoText));
  }

  Widget _buildToDoList() {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          if (index < _toDoItems.length) {
            return _buildToDoItem(_toDoItems[index]);
          }
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: AppBar(
              centerTitle: true,
              backgroundColor: Colors.red,
              title: Text(
                'To Do List',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )),
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.all(22),
              child: TextField(
                autofocus: true,
                onSubmitted: (val) {
                  _addToDoItem(val);
                },
              ),
            ),
            _buildToDoList(),
          ],
        ),
      ),
    );
  }
}

完整代码 2

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<String> _toDoItems = [];

  void _addToDoItem(String task) {
    if (task.length > 0) {
      setState(() {
        _toDoItems.add(task);
      });
    }
  }

  Widget _buildToDoItem(String toDoText) {
    return ListTile(title: Text(toDoText));
  }

  Widget _buildToDoList() {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          if (index < _toDoItems.length) {
            return _buildToDoItem(_toDoItems[index]);
          }
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: AppBar(
              centerTitle: true,
              backgroundColor: Colors.red,
              title: Text(
                'To Do List',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )),
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: TextField(
                        autofocus: true,
                        onSubmitted: (val) {
                          _addToDoItem(val);
                        },
                        decoration: InputDecoration(
                          hintText: 'Add a tak here...',
                          enabledBorder: OutlineInputBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(12.0)),
                            borderSide: BorderSide(color: Colors.red, width: 2),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(12.0)),
                            borderSide:
                                BorderSide(color: Colors.red, width: 1.5),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: RaisedButton(
                        child: Text('ADD'),
                        onPressed: null,
                      ),
                    ),
                  ],
                )),
            _buildToDoList(),
          ],
        ),
      ),
    );
  }
}