Flutter：列表视图显示空白或白屏？

Posted 2023-02-23

【中文标题】Flutter：列表视图显示空白或白屏？

【英文标题】：Flutter: List view shows blank or white screen?

【发布时间】：2020-01-01 03:13:32

【问题描述】：

我正在尝试在单个页面中构建一个产品简单的页面和许多网格视图，但它总是显示没有数据的白屏！！

我尝试在列和相同的空白屏幕之前添加 SafeArea 任何帮助！

return Column(children: <Widget>[
      Expanded(
          child: ListView(children: <Widget>[
        CarouselSlider(
            height: MediaQuery.of(context).size.height * 0.20,
            items: [1, 2, 3, 4, 5].map((i) 
              return Builder(builder: (BuildContext context) 
                return Container(
                    width: MediaQuery.of(context).size.width,
                    margin: EdgeInsets.symmetric(horizontal: 5.0),
                    child: Image.asset('assets/ad.jpg', fit: BoxFit.cover));
              );
            ).toList()),
        Container(
            padding: EdgeInsets.only(top: marginFixed * 2, right: marginFixed),
            alignment: Alignment(1, 0),
            child: Text("الأقسام :")),
        Padding(
            padding: const EdgeInsets.all(8.0),
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) 
                  return GestureDetector(
                      onTap: () ,
                      child: Card(
                          color: StyleCustom().red,
                          child: Column(children: <Widget>[
                            Container(
                                color: Colors.white,
                                height: MediaQuery.of(context).size.width / 2.5,
                                child: Image.asset('assets/ad1.png',
                                    fit: BoxFit.fill)),
                            Text("عروض حصرية",
                                style: TextStyle(color: Colors.white))
                          ])));
                ))
      ]))
    ]);

结果：

【问题讨论】：

你检查日志看是否有错误？有时它不会显示在屏幕上，而只会显示在 IDE 上

这里是日志：顺便说一句，缩小网格视图时，页面不再可滚动！我/颤动（2111）：相反。否则，请考虑使用“shrinkWrap”属性（或 ShrinkWrappingViewport）来调整 I/flutter（2111）的大小：视口的高度与其子项的高度之和。 I/flutter（2111）：I/flutter（2111）：用户创建的导致错误的小部件的祖先是：I/flutter（2111）：GridView lib\screens\home.dart:30 I/flutter（2111）： I/flutter (2111): 当异常被抛出时，这是堆栈：

【参考方案1】：

通过添加解决：

shrinkWrap: true,
physics: ScrollPhysics(),

在 GridView 内