当我的TextField和List在一起颤抖时，为什么不显示

问题描述

本周我才刚刚开始学习颤抖！，在观看了5个小时的视频后，我认为我将是一个很好的主意，利用我的知识来编写待办事项清单。我在布局顺序方面遇到了一些问题，因为我习惯于响应本机和html。因此，我有一个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但不显示列表的代码

body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,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)),width: 1.5),// the list widget here is removed so that the text field could appear
            
          ],

用于文本字段旁边的按钮：

body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,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)),focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),RaisedButton(
                    child: Text('ADD'),onPressed: null,)
                
            ),

解决方法

您可以在下面复制粘贴运行完整代码
您可以将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,);
  }

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