listview.builder 不在屏幕上显示项目

Posted 2023-02-23

【中文标题】listview.builder 不在屏幕上显示项目

【英文标题】：listview.builder not showing items on screen

【发布时间】：2020-10-15 19:05:43

【问题描述】：

所以我一直试图弄清楚如何让 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")),
                ],
              ))));

【参考方案1】：

将您的代码更改为以下内容。 删除 Center 和 ListView。只需使用 ListView.builder。 如果您在 Column 中使用 ListView.builder，则使用 E​​xpanded 小部件包装 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']",
              );
            ,
          );
  

【讨论】：

感谢您的帮助，我使用您的评论和其他评论试图找到解决方案，但仍然没有出现。我将我的 listview.builder 包装在一个扩展中，因为它现在在一个列内，但它似乎没有出现。由于我无法在此处评论所有代码，因此几乎是您粘贴的代码副本，而不是另一个答案中显示的“小部件”。

【参考方案2】：

您不能同时使用 ListView，因为两者都在全屏显示，在上述情况下，Listview 会占据所有屏幕，但 Listview.Builder 没有任何空间可以渲染。

您的代码层次结构应该是

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

【讨论】：

谢谢。我最终将代码放入您的层次结构中，这几乎是粘贴的另一个答案的代码副本，而不是您答案上的 Widget()。不幸的是，它仍然没有出现，但是当它不在列中时它确实出现了。知道发生了什么吗？