Flutter 为什么我的文本字段和列表在一起时不显示_Flutter_Dart

Flutter 为什么我的文本字段和列表在一起时不显示

flutter dart

Flutter 为什么我的文本字段和列表在一起时不显示,flutter,dart,Flutter,Dart,本周我刚开始学习颤振！，在观看了5个小时的视频后，我决定利用我的知识来制作一份待办事项清单。我在布局顺序上遇到了一些问题，因为我习惯于对本机和html做出反应。所以我有一个文本字段，用户可以在其中键入一个任务，然后提交它，这样它就可以出现在这个文本字段下面的添加任务列表中。在这个过程中，我意识到代码没有显示任何内容。如果文本字段被删除或列表被删除，代码只会显示一些内容，但看起来它们不能在同一页中。我怎样才能解决这个问题我的当前代码没有显示任何内容（main.dart）显示文本字段但不显示列表

本周我刚开始学习颤振！，在观看了5个小时的视频后，我决定利用我的知识来制作一份待办事项清单。我在布局顺序上遇到了一些问题，因为我习惯于对本机和html做出反应。所以我有一个文本字段，用户可以在其中键入一个任务，然后提交它，这样它就可以出现在这个文本字段下面的添加任务列表中。在这个过程中，我意识到代码没有显示任何内容。如果文本字段被删除或列表被删除，代码只会显示一些内容，但看起来它们不能在同一页中。我怎样才能解决这个问题

我的当前代码没有显示任何内容（main.dart）

显示文本字段但不显示列表的代码

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(),    
          ],
        ),

您可以复制粘贴运行下面的完整代码
您可以将

列表视图

与

展开

代码片段

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

Widget\u buildToDoList（）{
扩大回报(
子项：ListView.builder(
itemBuilder：（上下文，索引）{
如果（索引<_toDoItems.length）{
返回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(),
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
createState（）=>MyAppState（）；
}
类MyAppState扩展了状态{
列表_toDoItems=[]；
void\u addToDoItem（字符串任务）{
如果（task.length>0）{
设置状态（）{
_toDoItems.add（任务）；
});
}
}
小部件_buildToDoItem（字符串toDoText）{
返回ListTile（标题：Text（toDoText））；
}
小部件_buildToDoList（）{
扩大回报(
子项：ListView.builder(
itemBuilder：（上下文，索引）{
如果（索引<_toDoItems.length）{
返回buildToDoItem（toDoItems[index]）；
}
},
),
);
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar:首选大小(
首选尺寸：尺寸。从高度（50），
孩子：AppBar(
标题：对，
背景颜色：Colors.red，
标题：正文(
“待办事项清单”，
样式：TextStyle(
尺寸：24，
fontWeight:fontWeight.bold，
),
),
)),
背景颜色：Colors.white，
正文：专栏(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
容器(
保证金：所有（22），
孩子：TextField(
自动对焦：对，
提交：（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(),
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
createState（）=>MyAppState（）；
}
类MyAppState扩展了状态{
列表_toDoItems=[]；
void\u addToDoItem（字符串任务）{
如果（task.length>0）{
设置状态（）{
_toDoItems.add（任务）；
});
}
}
小部件_buildToDoItem（字符串toDoText）{
返回ListTile（标题：Text（toDoText））；
}
小部件_buildToDoList（）{
扩大回报(
子项：ListView.builder(
itemBuilder：（上下文，索引）{
如果（索引<_toDoItems.length）{
返回buildToDoItem（toDoItems[index]）；
}
},
),
);
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar:首选大小(
首选尺寸：尺寸。从高度（50），
孩子：AppBar(
标题：对，
背景颜色：Colors.red，
标题：正文(
“待办事项清单”，
样式：TextStyle(
尺寸：24，
fontWeight:fontWeight.bold，
),
),
)),
背景颜色：Colors.white，
正文：专栏(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
容器(
保证金：所有（22），
孩子：排(
儿童：[
扩大(
弹性：1，
孩子：TextField(
自动对焦：对，
提交：（val）{
_addToDoItem（val）；
},
装饰：输入装饰(
hintText:“在此处添加tak…”，
enabledBorder:OutlineInputBorder(
边界半径：
边界半径所有（半径圆形（12.0）），
borderSide:borderSide（颜色：Colors.red，宽度：2），
),
聚焦顺序：大纲输入边框(
边界半径：
边界半径所有（半径圆形（12.0）），
边界：
边框（颜色：颜色：红色，宽度：1.5），
),
),
),
),
扩大(
弹性：1，
孩子：升起按钮(
子项：文本（'ADD'），
onPressed:null，
),
),
],
)),
_buildToDoList（），
],
),
),
);
}
}

谢谢！只有一个问题，为什么要在

中包装列表<
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(),
          ],
        ),
      ),
    );
  }
}

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