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 HomeTabPage(name: tab.name,bannerList: tab.name == ‘推荐’ ? bannerList : null);

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

0
3
CrazyCodeBoy
回复
AKIRA晓
嗯,好的。
2023-12-05
共3条回复

Flutter高级进阶实战-仿哔哩哔哩-掌握Flutter高阶技能

一次性掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案

1723 学习 · 870 问题

查看课程