4.2 splash 启动界面

4.2 splash 启动界面

Splash 作用

  • 让 flutter 视图引擎有个缓存热身时间
  • 在 splash 决定去哪个界面
image-20220712145325923

实现步骤:


第 1 步:加入图片到 assets

将图片放入 assets/images/3.0x

然后执行 Assets: Images x1 x2 Generate 生成需要的 x1 x2 图片

img

复制 files.txt 配置到 lib/common/values/images.dart

1
2
3
4
class AssetsImages {
...
static const splashJpg = 'assets/images/splash.jpg';
}

第 2 步:修改 splash

lib/pages/system/splash/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class SplashPage extends GetView<SplashController> {
const SplashPage({Key? key}) : super(key: key);

Widget _buildView() {
return ImageWidget.asset(
AssetsImages.splashJpg,
fit: BoxFit.fill, // 填充整个界面
);
}

@override
Widget build(BuildContext context) {
return GetBuilder<SplashController>(
init: SplashController(),
id: "splash",
builder: (_) {
return _buildView();
},
);
}
}

第 3 步:修改 main 路由

lib/main.dart

1
2
// 路由
initialRoute: RouteNames.systemSplash,

最后:运行

image_WCL6mAWWu_

提交代码到 git