ListView.builder() 破坏了我的应用程序的整个页面。我究竟做错了什么？答案

【问题标题】：ListView.builder() breaking the whole page of my app. What am I doing wrong?ListView.builder() 破坏了我的应用程序的整个页面。我究竟做错了什么？
【发布时间】：2020-09-30 03:28:59
【问题描述】：

当我使用 .builder() 方法实现 ListView 类时，我的应用程序中断并且不会在该页面上显示任何内容。

这是我实现 ListView 的方式

Column(children: <Widget>[
  ListView.builder(
    itemCount: profileListItems.length,
    itemBuilder: (BuildContext context, int index) {
      ProfileListItem profileListItem = profileListItems[index];
      return InkWell(
        onTap: () {},
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Row(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.circular(28.0),
                    child: Container(
                       height: 50.0,
                       width: 50.0,
                       color: Theme.of(context).primaryColor,
                       child: profileListItem.icon
                     ),
                   ),
                 ],
               ),
               SizedBox(width: 16),
               Text(
                 profileListItem.text,
                 style: TextStyle(
                   color: Colors.black87,
                   fontWeight: FontWeight.bold,
                   fontSize: 16
                 ),
               )
             ],
           ),
         ),
       );
     }
   )
])

这是我的 ProfileListItem 类

import 'package:flutter/material.dart';

class ProfileListItem {
  Icon icon;
  String text;
  String navigation;

  ProfileListItem({
    this.icon,
    this.text,
    this.navigation,
  });
}

List<ProfileListItem> profileListItems = [
  ProfileListItem(
    icon: Icon(
      Icons.dashboard,
      color: Colors.white,
      size: 24.0,
    ),
    text: 'Dashoard',
    navigation: 'Italy',
  )
];

当我添加 ListView 类时，页面上的所有其他小部件也会消失。只是一个白屏。

【问题讨论】：

您是否收到任何错误消息？
因为Column，添加设计图
@Jwildsmith 代码中没有错误，运行时没有错误，ios/android 模拟器的屏幕上也没有错误。
@Kherel 你这是什么意思？
该列似乎没有任何用途，请尝试将其删除并使用 ListView.builder

标签： listview flutter dart builder

【解决方案1】：

也许您可以使用 Expanded 小部件作为列表视图的父级

Column(
 children: <Widget>[
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: ordersList.length,// Your List
itemBuilder: (context, index) {
// Followed by your return widget.
})),
]
)

如果您不想使用完整的空间，您可以移除展开的空间，只保留 shrinkWrap: true, 参数。

【讨论】：

谢谢。我将 Column 更改为 Container 并添加了 Expanded 小部件，它现在可以工作了。
当您想要许多带有垂直列表视图的小部件时，应该使用 Column，但似乎您不需要它直接使用 Expanded 而不是容器会为您完成工作。