Flutter:启动屏逻辑处理02:启动页

启动屏启动之后,制作一个启动页面

新建splash:view

视图中只有一张图片sliding.png就是我们的启动图

js 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'index.dart';
class SplashPage extends GetView<SplashController> {
  const SplashPage({Key? key}):super(key: key);
  // 主视图
  Widget _buildView() {
    return const Image(image: AssetImage('images/sliding.png'));
  }
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SplashController>(
      init: SplashController(),
      id: "splash",
      builder: (_) {
        return Scaffold(
          // SafeArea():安全区域,删除后页面顶到顶部
          body: _buildView(),
        );
      },
    );
  }
}

main入口路由配置

js 复制代码
initialRoute: '/splashPage',

启动后会默认先展示前一章自定义的APP启动图标,之后便会进入启动图页。

启动图页面也可以加一些跳转的逻辑,

haskell 复制代码
第一次启动APP:跳转欢迎页
第二次启动APP:
是否已登录:跳转首页
否则:跳转登陆页
相关推荐
星释4 小时前
二级等保实战:MySQL安全加固
android·mysql·安全
漂流瓶jz4 小时前
Webpack中各种devtool配置的含义与SourceMap生成逻辑
前端·javascript·webpack
这是个栗子4 小时前
【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
javascript·vue.js·pnpm·eslint
zy happy5 小时前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi
芝麻开门-新起点5 小时前
Flutter 项目全流程指南:编译、调试与发布
flutter
星释6 小时前
鸿蒙Flutter三方库适配指南:11.插件发布上线及使用
flutter·华为·harmonyos
Nan_Shu_6146 小时前
学习:JavaScript(5)
开发语言·javascript·学习
533_6 小时前
[vue3] h函数,阻止事件冒泡
javascript·vue.js·elementui
通往曙光的路上6 小时前
day22_用户授权 头像上传
javascript·vue.js·ecmascript