Question

所以我一直在试图弄清楚如何使listview.builder（）在Flutter中正常工作。在这里，我有一个字典列表，每个字典都有3个键。如果您在Homepage（）小部件中查找，我将返回Todo（）小部件，该小部件包含3个参数，每个参数均用于文本。出于某种原因，该窗口小部件未显示在我的应用程序中，我试图使用字典值作为Todo小部件上的参数，因为这样做似乎很明智，但不幸的是它无法正常工作。我希望更多有经验的Flutter开发人员可以帮助我，谢谢！

代码：

  List todoData = [
{
  'todo': 'Pick up milk',
  'time': 'Time: 10:00AM',
  'urgency': 'Urgency: Important',
},
{
  'todo': 'Pick up milk',
  'time': 'Time: 10:00AM',
  'urgency': 'Urgency: Important',
},
{
  'todo': 'Pick up milk',
  'time': 'Time: 10:00AM',
  'urgency': 'Urgency: Important',
},
{
  'todo': 'Pick up milk',
  'time': 'Time: 10:00AM',
  'urgency': 'Urgency: Important',
},
{
  'todo': 'Pick up milk',
  'time': 'Time: 10:00AM',
  'urgency': 'Urgency: Important',
},


 ];

  Widget HomePage() {
    var index = 0;
    return Center(
      child: ListView(
        padding: EdgeInsets.all(10),
        children: <Widget>[
          ListView.builder(
            itemCount: todoData.length,
            itemBuilder: (BuildContext context, index) {
              return Todo(
                  '${todoData[index]['todo']}',
                  '${todoData[index]['time']}',
                  '${todoData[index]['urgency']}',
              );
            },
          )
        ],
      ),
    );
  }

Widget Todo(String titletext, String time, String urgency) {
  return Padding(
      padding: EdgeInsets.all(20),
      child: Container(
          height: 150,
          decoration: BoxDecoration(
              color: Colors.blue, borderRadius: BorderRadius.circular(30)),
          child: Padding(
              padding: EdgeInsets.all(10),
              child: Stack(
                children: <Widget>[
                  TitleText("Pick up Milk"),
                  Positioned(top: 40, child: BodyText("Time: 10:00AM")),
                  Positioned(top: 70, child: BodyText("Urgency: Important")),
                ],
              ))));
}

Answer 1

将代码更改为以下内容。删除Center和ListView。只需使用ListView.builder。如果您在列内使用ListView.builder，则用Expanded小部件包装ListView.builder。

 Widget HomePage() {
    return ListView.builder(
            itemCount: todoData.length,
            itemBuilder: (BuildContext context, index) {
            final item = todoData[index]
              return Todo(
                  "${item['todo']}",
                  "${item['time']}",
                  "${item['urgency']}",
              );
            },
          );
  }

Answer 2

您不能同时使用这两种ListView，因为两者都将全屏显示，在上述条件下，Listview会占据所有屏幕，但对于Listview来说，它会占据所有屏幕。Builder没有可渲染的空间。

您的代码层次结构应为

 Column(children: [
      Expanded(
        child: ListView.builder(shrinkWrap: true,itemBuilder: (ctx, index) {
          return Widget();
        }),
      )
    ]);

listview.builder没有在屏幕上显示项目

2 个答案: