banner的显示问题
来源:6-4 轮播图Banner组件封装

AKIRA晓
2023-12-01
我这里按照代码进行修改 发现banner要么是占满全屏 要么只有居中屏幕显示
跟教程上的显示方式差了很多 而且我在切换其他home tab的时候 报了空异常 想问下老师这个是什么原因导致的
我这边banner设置代码
child: Image.network(bannerMo.cover,fit: BoxFit.fitWidth,),
cover 我也试过 直接全屏显示 下面是空异常
Null check operator used on a null value
The relevant error-causing widget was:
HomeTabPage HomeTabPage:file:///Users/mac/Desktop/screenas/lib/page/home_page.dart:79:30
When the exception was thrown, this was the stack:
#0 _HomeTabPageState._banner (package:screenas/page/home_tab_page.dart:33:43)
#1 _HomeTabPageState.build (package:screenas/page/home_tab_page.dart:25:14)
#2 StatefulElement.build (package:flutter/src/widgets/framework.dart:5409:27)
#3 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5297:15)
#4 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5462:11)
#5 Element.rebuild (package:flutter/src/widgets/framework.dart:5016:7)
#6 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:5279:5)
这几个代码 是他指出的报错点
return Container(
child: _banner(),
);
_banner() {
return Padding(
padding: EdgeInsets.only(left: 5,right:5),
child: HiBanner(widget.bannerList!),
);
}
1回答
-
CrazyCodeBoy
2023-12-04
要防止`bannerList`为空指针,你可以在使用前检查它是否为null。你可以使用条件运算符来处理这种情况,例如:
```dart
return Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: widget.bannerList != null
? HiBanner(widget.bannerList!)
: Container(), // 或者你可以使用其他适当的 Widget 替代 Container
);
```
这样,如果`bannerList`为null,就会渲染一个空的`Container`或者其他你选择的 Widget,避免了空指针异常。
另外,关于全屏,居中的问题,我用课程源码没有复现,可以对照下这块课程源码检查下你的代码实现看是否有出入的地方
https://git.imooc.com/coding-487/fa-component
032023-12-05
相似问题