添加 Listview builder 时，整个屏幕变为空白答案

【问题标题】：When adding ListView builder , the entire screen is goes blank添加 Listview builder 时，整个屏幕变为空白
【发布时间】：2022-06-24 14:52:37
【问题描述】：

当我尝试添加列表视图构建器时，我的整个屏幕都变黑了这是列表视图构建器代码

ListView.builder(
                shrinkWrap = true,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  final data = courseCardList[index];
                  return Row(
                    children: [
                      CourseList(
                        color: data.color,
                        icon: data.icon,
                        caption: data.caption,
                        head: data.head,
                        timePeriod: data.timePeriod,
                        rating: data.rating,
                      ),
                    ],
                  );
                },
              ),

是什么导致了这个错误？如果需要任何其他代码，请发表评论

这里是完整代码：https://github.com/Mishalhaneef/unais-academy-ui-repo

这是该页面的代码

import 'package:flutter/material.dart';
import 'package:unais_academy_ui/homescreen.dart';
import 'package:unais_academy_ui/screen/counstruction%20page/construction_page.dart';
import 'package:unais_academy_ui/screen/dashboard/widgets/course_bar.dart';
import 'package:unais_academy_ui/screen/homepage/widgets/course_list.dart';
import 'package:unais_academy_ui/constants.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../dashboard/model.dart';
import 'widgets/card_view.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String userName = 'mishal';
    
    return Container(
      decoration: const BoxDecoration(gradient: kHomeColor),
      child: Scaffold(
        drawer: NavigationDrawerWidget(),
        //appBar code
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(60.0),
          child: Column(
            children: [
              const SizedBox(height: 2),
              AppBar(
                elevation: 0,
                backgroundColor: kMainTheme,
                leading: Builder(builder: (BuildContext context) {
                  return IconButton(
                    icon: SvgPicture.asset(
                      'assets/icons/sidebar.svg',
                      color: Colors.black,
                    ),
                    iconSize: 10,
                    onPressed: () {
                      Scaffold.of(context).openDrawer();
                    },
                    tooltip:
                        MaterialLocalizations.of(context).openAppDrawerTooltip,
                  );
                }),
                actions: [
                  IconButton(
                      onPressed: () {
                        HomeScreen.selectedIndexNotifier.value = 1;
                      },
                      icon: SvgPicture.asset('assets/icons/search.svg')),
                  const SizedBox(width: 10),
                  GestureDetector(
                    onTap: () {
                      HomeScreen.selectedIndexNotifier.value = 3;
                    },
                    child: CircleAvatar(
                      radius: 16.0,
                      child: ClipRRect(
                        child: Image.asset('assets/account.jpg'),
                        borderRadius: BorderRadius.circular(50.0),
                      ),
                    ),
                  ),
                  const SizedBox(width: 20)
                ],
              ),
            ],
          ),
        ),
        backgroundColor: Colors.transparent,
        //body code
        body: ListView(
          children: [
            Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              const SizedBox(height: 37),
              Padding(
                padding: EdgeInsets.only(left: 30, right: 0),
                child: Row(
                  children: [
                    const Text('Helo ',style: headRichText),
                    Text(userName[0].toUpperCase(), style: headRichText),
                    Text(userName.substring(1).toLowerCase(), style: headRichText),
                  ],
                )
              ),
              const Padding(
                padding: EdgeInsets.only(left: 30, right: 0),
                child: Text("Find a course you want to learn",
                    style: secondRichText),
              ),
              // ignore: sized_box_for_whitespace
              CardView(
                backgroundColor: sLinearColorBlue,
                buttonText: 'Join Now!',
                headText: '50% off',
                personImage: 'assets/person_home.png',
                secondText: 'For Any Course!',
              ),

              const SizedBox(height: 18),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 30),
                    child: Text('Explore Course', style: helperTextStyle),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 15),
                    child: TextButton(
                      // ignore: prefer_const_constructors
                      style: ButtonStyle(
                        padding: MaterialStateProperty.all(EdgeInsets.zero),
                      ),
                      onPressed: () {
                        Navigator.of(context)
                            .pushNamed(ConstructionPage.routeName);
                      },
                      child: const Text(
                        'See All',
                        style: TextStyle(color: Colors.blue),
                      ),
                    ),
                  )
                ],
              ),
              const SizedBox(height: 1),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: const [
                    SizedBox(width: 30),
                    CourseList(
                      color: kLiteRed,
                      icon: 'assets/youtube.png',
                      caption: 'How To Market Your YouTube Channel',
                      head: 'Marketing',
                      timePeriod: 18,
                      rating: 4.6,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteRose,
                      icon: 'assets/chart.png',
                      caption: 'Grow Your Channel With this very usefull tips',
                      head: 'Channel Growth',
                      timePeriod: 18,
                      rating: 4.3,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteGreen,
                      icon: 'assets/diagram.png',
                      caption: 'How to Make Thumbnail Attractive',
                      head: 'Creative',
                      timePeriod: 18,
                      rating: 3.4,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteRose,
                      icon: 'assets/calender.png',
                      caption: 'Light Your Video Like A Pro',
                      head: 'Creative',
                      timePeriod: 18,
                      rating: 5.0,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteRed,
                      icon: 'assets/youtube.png',
                      caption: 'How To Market Your YouTube Channel',
                      head: 'Marketing',
                      timePeriod: 18,
                      rating: 3.9,
                    ),
                    SizedBox(width: 20),
                  ],
                ),
              ),
              const SizedBox(height: 14),
              const Padding(
                padding: EdgeInsets.only(left: 50, right: 50),
                child: Divider(height: 1),
              ),
              const SizedBox(height: 10),
              const Padding(
                padding: EdgeInsets.only(left: 30),
                child: Text('Your Course', style: helperTextStyle),
              ),
              const SizedBox(height: 22),
              SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: ListView.separated(
                  physics: const BouncingScrollPhysics(),
                  shrinkWrap: true,
                  itemBuilder: (BuildContext context, int index) {
                    final data = myCourseBar[index];
                    return CourseBar(
                      icon: data.icon,
                      caption: data.caption,
                      time: data.time,
                      colorTheme: data.colorTheme,
                      duration: data.duration,
                      status: data.status,
                    );
                  },
                  itemCount: myCourseBar.length,
                  separatorBuilder: (BuildContext context, int index) {
                    return const SizedBox(height: 20);
                  },
                ),
              ),
            ])
          ],
        ),
      ),
    );
  }
}

class NavigationDrawerWidget extends StatelessWidget {
  const NavigationDrawerWidget({Key? key}) : super(key: key);
  final padding = const EdgeInsets.symmetric(horizontal: 20);

  @override
  Widget build(BuildContext context) {
    const name = 'Mishal Haneef';
    const email = 'msldroidofficial@gmail.com';
    const urlImage = 'assets/account.jpg';
    return Drawer(
      child: Material(
        color: kDeepBlueTheme,
        child: ListView(
          padding: padding,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                  color: kDeepBlueTheme.withGreen(130),
                  borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(30),
                      bottomRight: Radius.circular(30))),
              child: buildHeader(
                urlImage: urlImage,
                name: name,
                email: email,
                onClicked: () => null,
              ),
            ),
            const SizedBox(height: 48),
            buildMenuItem(
              text: 'Account',
              icon: Icons.people,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Dash Board',
              icon: Icons.dashboard,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Explore',
              icon: Icons.explore,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Wishlist',
              icon: Icons.info,
            ),
            const SizedBox(height: 16),
            const SizedBox(height: 24),
            const Divider(color: Colors.white70),
            const SizedBox(height: 24),
            buildMenuItem(
              text: 'Terms &',
              icon: Icons.info,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Logout',
              icon: Icons.logout,
            ),
          ],
        ),
      ),
    );
  }

  Widget buildMenuItem({
    required String text,
    required IconData icon,
    VoidCallback? onClicked,
  }) {
    return ListTile(
      leading: Icon(
        icon,
        color: Colors.white,
      ),
      title: Text(
        text,
        style: const TextStyle(color: Colors.white),
      ),
      onTap: () {},
    );
  }

  Widget buildHeader({
    required String urlImage,
    required String name,
    required String email,
    required VoidCallback onClicked,
  }) {
    return Padding(
      padding: const EdgeInsets.only(top: 40, right: 10, left: 10),
      child: InkWell(
        borderRadius: BorderRadius.circular(30),
        onTap: onClicked,
        child: Container(
          padding: const EdgeInsets.only(top: 10, bottom: 10),
          child: Row(
            children: [
              CircleAvatar(
                radius: 20,
                backgroundImage: AssetImage(urlImage),
              ),
              const SizedBox(width: 20),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    name,
                    style: const TextStyle(fontSize: 20, color: Colors.white),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    email,
                    style: const TextStyle(fontSize: 14, color: Colors.white),
                  )
                ],
              ),
              const Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}

这是主页的代码。如果你们需要完整的代码here 是 GitHub repo 链接

【问题讨论】：

您能否分享您的完整代码 sn-p 以更好地理解，顺便说一句，我认为这里缺少“courseCardList[index] 更改为 courseCardList[index].length”
添加itemCount: courseCardList.length
它不工作
@SaifulIslam 添加了代码，请查看

标签： flutter dart

【解决方案1】：

水平的 Listview.builder 需要一个固定的高度。水平的列表项不应该有无限的高度。所以我想到了解决方案，只需用容器包装 Listview.builder 并设置该容器的高度，如下所示。

Flutter 框架只有在构建小部件后才能知道它的高度。

如果您正在动态构建 ListView 子项，则它无法计算 ListView 所需的高度，直到它的所有子项都已构建好，这可能永远不会发生（无限 ListView）。

您可以给 ListView 一个固定的高度并动态构建它的子视图，或者让 ListView 的高度取决于它的子视图。

Container(
                  height: 200,
                  child: ListView.builder(
                    shrinkWrap = true,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context, int index) {
                      final data = courseCardList[index];
                      return Row(
                        children: [
                          CourseList(
                            color: data.color,
                            icon: data.icon,
                            caption: data.caption,
                            head: data.head,
                            timePeriod: data.timePeriod,
                            rating: data.rating,
                          ),
                        ],
                      );
                    },
                  ),
                );

【讨论】：

【解决方案2】：

ListView Widget下

使用shrinkWrap: true
添加项目计数，itemCount: courseCardList.length

如果还是不能解决问题，

删除Row() 小部件，我可以看到你只返回它下面的一个小部件，所以直接返回那个小部件CourseList()

代码应该是这样的。

ListView.builder(
            shrinkWrap : true,
            itemCount: courseCardList.length,
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              final data = courseCardList[index];
              return CourseList(
                      color: data.color,
                      icon: data.icon,
                      caption: data.caption,
                      head: data.head,
                      timePeriod: data.timePeriod,
                      rating: data.rating,
                  );
            },
          ),

【讨论】：

当scrollDirection: Axis.horizontal, 变为垂直时它不工作，它工作正常但垂直滚动，我需要水平滚动
什么不工作，你能分享一下这个问题吗？
它完成了兄弟，我需要做的就是给一个固定的高度和宽度，现在它完成了
固定高度和宽度不是动态或好的解决方案，因为不同屏幕尺寸的各种设备都会出现问题。

【解决方案3】：

我想你忘了itemCount

Expanded(
     child:ListView.builder(
            shrinkWrap = true,
            itemCount = 5,// add this line or put courseCardList.length
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              final data = courseCardList[index];
              return Row(
                children: [
                  CourseList(
                    color: data.color,
                    icon: data.icon,
                    caption: data.caption,
                    head: data.head,
                    timePeriod: data.timePeriod,
                    rating: data.rating,
                  ),
                ],
              );
            },
          ),
      ),

参考ListView和Long List

【讨论】：

【解决方案4】：

为您的 ListviewBuilder 提供 itemCount 并用 Expanded 或一些固定大小的小部件（如容器）包装它：

Expanded(
child: ListView.builder(
    itemCount: your counts(int)
    .....
    .....
  )
)

【讨论】：

不，我现在添加了项目数，但我只能向下滚动，当我将轴设置为水平时，它只是再次空白部分