Flutter仿Boss-2.启动页、引导页

news/2024/6/20 21:14:35/文章来源:https://blog.csdn.net/u014741977/article/details/137229432

简述

在移动应用开发中,启动页和引导页是用户初次接触应用时的重要组成部分,能够提升用户体验和导航用户了解应用功能。本文将介绍如何使用Flutter实现启动页和引导页,并展示相关代码实现。

启动页

启动页是应用的第一个页面,首次进入需要进入应用引导页面,非首次进入欢迎界面(广告界面),所以我们需要保存是否首次进入APP,这里采用:

shared_preferences: ^2.2.2

我们可以定义一个工具类SpUtil

/// 键值对 key
class SPKey{static const String isFirstOpen = 'isFirstOpen';
}/// 键值对存储
class SpUtil {///是否第一次打开static bool isFirstOpen() {SharedPreferences sp = Get.find<SharedPreferences>();return sp.getBool(SPKey.isFirstOpen) ?? true;}/// 已打开APPstatic void appIsOpen() {Get.find<SharedPreferences>().setBool(SPKey.isFirstOpen, false);}
}

这里配合了Getx一起使用了。
然后在启动页里判断是否是首次来切换是欢迎界面还是引导页面。

/// 启动页面-欢迎界面/引导页面
class SplashPage extends StatelessWidget {const SplashPage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {ScreenUtil.init(context, designSize: const Size(375, 812));var child = SpUtil.isFirstOpen() ? const GuidePage() : const WelcomePage();return Scaffold(body: child,resizeToAvoidBottomInset: false,);}
}

欢迎界面

欢迎界面通常用于展示应用的logo或者欢迎界面。在我们的Flutter项目中,我们通过WelcomePage来实现启动页功能。

效果

代码

/// 欢迎页面
class WelcomePage extends StatelessWidget {const WelcomePage({Key? key}) : super(key: key);Widget build(BuildContext context) {final logic = Get.put(WelcomeLogic());return WillPopScope(onWillPop: () {return Future.value(false);},child: Stack(children: [Positioned.fill(child: Container(color: const Color(0xFF40C2BB),width: double.infinity,height: double.infinity,child: Image.asset(R.splash_bg_jpg,fit: BoxFit.cover,),),),Obx(() => Positioned(right: 16.w,top: 30.w,child: InkWell(child: Container(padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 3.w),decoration: BoxDecoration(border: Border.all(color: Colors.white, width: 1.w),borderRadius: BorderRadius.all(Radius.circular(8.w)),),child: Text(logic.state.adStr.value,style: const TextStyle(color: Colors.white,fontSize: 14,fontWeight: FontWeight.w600,),),),onTap: () {logic.openHomePage();},),),),],),);}
}class WelcomeLogic extends GetxController {final WelcomeState state = WelcomeState();int _timeCount = 3;Timer? _timer;void onReady() {super.onReady();_startTimer();}///打开计时器void _startTimer() {_timer = Timer.periodic(const Duration(seconds: 1), (Timer t) {state.adStr.value = "广告$_timeCount秒跳过";if (_timeCount <= 0) {openHomePage();return;}_timeCount--;});}///停止计时器void _stopTimer() {_timer?.cancel();_timer = null;}/// 打开首页void openHomePage() {_stopTimer();Get.offAndToNamed(Routers.homePage);}void onClose() {_stopTimer();super.onClose();}
}class WelcomeState {RxString adStr = "广告3秒跳过".obs;
}

WelcomePage中,我们展示了一个背景图和一个跳过广告的按钮。在逻辑部分,我们设置了一个计时器,3秒后自动跳转到首页/登录页。

引导页

引导页用于向用户介绍应用的功能和特点,帮助用户快速上手。在我们的Flutter项目中,我们通过GuidePage来实现引导页功能。

效果

代码

/// 引导页
class GuidePage extends StatelessWidget {const GuidePage({Key? key}) : super(key: key);Widget build(BuildContext context) {final logic = Get.put(GuideLogic());return Stack(children: [Positioned.fill(child: PageView(controller: logic.pageController,onPageChanged: (index) {logic.state.currentPageIndex.value = index;},children: _guideWidgets(),),),Positioned(bottom: 50,left: 50,right: 50,child: Row(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Expanded(child: InkWell(onTap: () {logic.findPeople();},child: Container(alignment: Alignment.center,padding: EdgeInsets.symmetric(vertical: 10.w),decoration: BoxDecoration(color: const Color(0xFF40C2BB),borderRadius: BorderRadius.circular(8.r),),child: Text(RS.findPeople.tr,style: TextStyle(fontWeight: FontWeight.w700,fontSize: 16.sp,color: Colors.white,),),),),),SizedBox(width: 40.w,),Expanded(child: InkWell(onTap: () {logic.findWork();},child: Container(alignment: Alignment.center,padding: EdgeInsets.symmetric(vertical: 10.w),decoration: BoxDecoration(color: const Color(0xFF40C2BB),borderRadius: BorderRadius.circular(8.r),),child: Text(RS.findWork.tr,style: TextStyle(fontWeight: FontWeight.w700,fontSize: 16.sp,color: Colors.white,),),),),),],),),],);}///引导页子布局们List<Widget> _guideWidgets() {return [_itemGuideWidget(index: 0,icon: R.guide_one_png,title: '与未来上司直接沟通',des: '百万数量boss已入驻,等你开聊',),_itemGuideWidget(index: 1,icon: R.guide_two_png,title: '聊着天把工作搞定',des: '谈薪资,聊待遇,直接沟通,解答疑问',),_itemGuideWidget(index: 2,icon: R.guide_three_png,title: '快速融入新单位',des: '找工作到入职,最快只要一天',),];}///单个子布局Widget _itemGuideWidget({required int index,required String icon,required String title,required String des,}) {return Column(children: [AspectRatio(aspectRatio: 640 / 628,child: Image.asset(icon,fit: BoxFit.fitWidth,),),Container(height: 50.w,color: Colors.grey.withAlpha(20),),SizedBox(height: 25.w),_guideIndexWidget(index: index),SizedBox(height: 25.w),Text(title,style: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.w800,color: Colors.black,),),SizedBox(height: 10.w),Text(des,style: TextStyle(fontSize: 14.sp,fontWeight: FontWeight.w400,color: Colors.grey,),),Expanded(child: Container()),],);}///子布局索引Widget _guideIndexWidget({required int index}) {return Row(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: [Container(width: 10,height: 10,decoration: BoxDecoration(shape: BoxShape.circle,color: (index == 0)? const Color(0xFF40C2BB): Colors.grey.withAlpha(50),),),SizedBox(width: 10.w),Container(width: 10,height: 10,decoration: BoxDecoration(shape: BoxShape.circle,color: (index == 1)? const Color(0xFF40C2BB): Colors.grey.withAlpha(50),),),SizedBox(width: 10.w),Container(width: 10,height: 10,decoration: BoxDecoration(shape: BoxShape.circle,color: (index == 2)? const Color(0xFF40C2BB): Colors.grey.withAlpha(50),),),],);}
}class GuideLogic extends GetxController {final GuideState state = GuideState();PageController pageController = PageController();Timer? _timer;void onReady() {super.onReady();_startLoopGuide();}/// 启动轮询器,每隔3秒切换到下一页void _startLoopGuide() {_timer = Timer.periodic(const Duration(seconds: 3), (timer) {state.currentPageIndex.value = state.currentPageIndex.value == 2? 0: state.currentPageIndex.value + 1;pageController.animateToPage(state.currentPageIndex.value,duration: const Duration(milliseconds: 300),curve: Curves.easeInOut,);});}///停止轮询void _stopLoopGuide() {_timer?.cancel();_timer == null;}///我要招人void findPeople() {_stopLoopGuide();SpUtil.appIsOpen();Get.offAndToNamed(Routers.homePage);}///我要应聘void findWork() {_stopLoopGuide();SpUtil.appIsOpen();Get.offAndToNamed(Routers.homePage);}void onClose() {_stopLoopGuide();super.onClose();}
}class GuideState {RxInt currentPageIndex = 0.obs;
}

GuidePage中,我们展示了一个PageView来滑动展示多个引导页内容。用户可以通过滑动页面了解应用的功能和特点。在底部我们放置了两个按钮,分别用于“我要招人”和“我要应聘”,点击按钮后跳转到首页。

通过以上的实现,我们完成了Flutter仿Boss应用的启动页和引导页功能,帮助用户更好地了解应用,并提供了快速导航到首页的功能。
详情见:github.com/yixiaolunhui/flutter_project

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1033300.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac电脑Jmeter集成到Jenkins,压测多个接口并生成测试报告

Jenkins支持的JDK版本17、21&#xff0c;通过java -version查看当前JDK版本&#xff0c;确认是否匹配 打开网址https://www.jenkins.io/download 点击下载&#xff0c;选择mac版本 commend空格打开终端&#xff0c;输入安装命令brew install jenkins 安装完成后输入brew servi…

Github 2024-04-01 开源项目月报 Top20

根据Github Trendings的统计,本月(2024-04-01统计)共有20个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目9TypeScript项目2非开发语言项目2Jupyter Notebook项目2HTML项目1CSS项目1C#项目1Shell项目1Lua项目1JavaScript项目1C项目1Java项目…

【二叉树】Leetcode 437. 路径总和 III【中等】

路径总和 III 给定一个二叉树的根节点 root &#xff0c;和一个整数 targetSum &#xff0c;求该二叉树里节点值之和等于 targetSum 的 路径 的数目。 路径 不需要从根节点开始&#xff0c;也不需要在叶子节点结束&#xff0c;但是路径方向必须是向下的&#xff08;只能从父节…

Qt加载.css/.qss文件设置控件的QSS样式(支持程序运行时修改且立即生效类似换肤效果)

初学Qt时&#xff0c;你是如何设置QWidget&#xff0c;QPushButton等原生基础控件的样式的&#xff1f;是不是主要是两种方法&#xff1f; 1.直接在可视化的.ui文件中直接添加qss语句。 2.在代码中通过setStyleSheet(QString qss)来设置qss语句。 上述两种方法&#xff0c;在程…

深度思考:雪花算法snowflake分布式id生成原理详解

雪花算法snowflake是一种优秀的分布式ID生成方案&#xff0c;其优点突出&#xff1a;它能生成全局唯一且递增的ID&#xff0c;确保了数据的一致性和准确性&#xff1b;同时&#xff0c;该算法灵活性强&#xff0c;可自定义各部分bit位&#xff0c;满足不同业务场景的需求&#…

ROS2从入门到精通1-2:详解ROS2服务通信机制与自定义服务

目录 0 专栏介绍1 服务通信模型2 服务模型实现(C)3 服务模型实现(Python)4 自定义服务5 话题、服务通信的异同 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。…

Linux基础命令篇:Linux文件权限与访问控制基础

Linux文件权限与访问控制基础 下面将详细介绍Linux文件权限管理&#xff0c;帮助有需要的ikun理解和应用这些概念。从基本的权限概念开始&#xff0c;然后介绍如何查看和修改权限。最后&#xff0c;我们整点高级的东西&#xff0c;如访问控制列表&#xff08;ACL&#xff09;。…

[Leetcode笔记] 动态规划相关

前言 写题目写到了一些和动态规划相关的内容&#xff0c;所以在这里记录一下 LCR 089 题解思路 总的来说&#xff0c;就是用一个数组去存储当前的最优解&#xff0c;然后从0开始一路向上顺推过去&#xff0c;求得最后一位的最优解。 class Solution { public:int rob(vect…

207基于matlab Simulink的无人机模型模拟飞机飞行过程

基于matlab Simulink的无人机模型模拟飞机飞行过程&#xff0c;具有GUI界面&#xff0c;可自行设置四旋翼飞行器结构参数&#xff0c;设有模拟仿真飞机动画。程序运行步骤&#xff1a;1&#xff0c;将Copy_4_of_quadrotorsflyerGU.mdlI文件拖入matlab命令窗口&#xff1b;2&…

算法——矩阵,被围绕的区域

. - 力扣&#xff08;LeetCode&#xff09; 最开始也是考虑使用dfs&#xff0c;对于矩阵中的每个点&#xff0c;如果能到达边界的O&#xff0c;则跳过继续dfs。否则如果上下左右四个方向都无法到达边界的O&#xff0c;则说明当前的无法到达&#xff0c;在一个set中记录他的行数…

1.5编写一个程序,输入梯形的上底,下底和高,输出梯形的面积。

1、编写一个程序,输入梯形的上底,下底和高,输出梯形的面积。 package com.kangning.web.controller.system;import java.util.Scanner;/*** 编写一个程序,输入梯形的上底,下底和高,输出梯形的面积。*/ public class CountArea {public static void main(String[] args) …

【操作系统】想要更好的学习计算机,操作系统的知识必不可少!!!

操作系统的概念 导言一、日常生活中的操作系统二、计算机系统层次结构三、操作系统的定义3.1 控制和管理计算机资源3.2 组织、调度计算机的工作与资源的分配3.3 给用户和其他软件提供方便接口与环境3.4 总结 四、操作系统的目标和功能4.1 作为管理者4.1.1 处理机管理4.1.2 存储…

【A-006】基于SSH的新闻发布系统(含论文)

【A-006】基于SSH的新闻发布系统&#xff08;含论文&#xff09; 开发环境&#xff1a; Jdk7(8)Tomcat7(8)MySQLIntelliJ IDEA(Eclipse) 数据库&#xff1a; MySQL 技术&#xff1a; SpringStruts2HiberanteJSPJquery 适用于&#xff1a; 课程设计&#xff0c;毕业设计&…

算法系列--递归,回溯,剪枝的综合应用(1)

&#x1f495;"对相爱的人来说&#xff0c;对方的心意&#xff0c;才是最好的房子。"&#x1f495; 作者&#xff1a;Lvzi 文章主要内容&#xff1a;算法系列–递归,回溯,剪枝的综合应用(1) 大家好,今天为大家带来的是算法系列--递归,回溯,剪枝的综合应用(1) 1.全排…

Higress 基于自定义插件访问 Redis

作者&#xff1a;钰诚 简介 基于 wasm 机制&#xff0c;Higress 提供了优秀的可扩展性&#xff0c;用户可以基于 Go/C/Rust 编写 wasm 插件&#xff0c;自定义请求处理逻辑&#xff0c;满足用户的个性化需求&#xff0c;目前插件已经支持 redis 调用&#xff0c;使得用户能够…

蓝桥杯-岛屿个数

solution 数1的块数题&#xff0c;加了内岛不计入的小限制&#xff0c;以及输入数据间没有空格&#xff0c;不是矩阵形式的整数输入。 判断是否是子岛屿&#xff1a;如果该岛屿有边缘部分或者可以通过外海走到边缘部分说明不是子岛屿 #include<iostream> #include<…

Django创建多app应用

目录 1. 引言 2. 多app创建的两种方式 2.1 多个app结构 2.2 单个apps多个app 3. 最后 1. 引言 在平常业务开发中&#xff0c;我们遇到的功能可能会有很多&#xff0c;单个app的应用可能无法满足我们 这个时候&#xff0c;我们就需要多app应用&#xff0c;例如&#xff1a…

基于SSM+Jsp+Mysql的固定资产管理系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

在线考试系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

Linux 系统 安装redis

Linux 系统 安装redis 下载redis安装包&#xff0c;并上传到服务器指定安装目录 一、解压安装包并安装 1、 tar xzf redis-4.0.9.tar.gz 2、先通过gcc -v是否有安装gcc&#xff0c;如果没有安装 统一安装Gcc rpm -Uvh *.rpm --nodeps --force 3、cd /usr/local/red…