中秋快乐!来看看满眼都是中秋气息的app页面吧~

简介: 前言:看了很久,大家是真的🐂🍺,月球绕地球都整出来了,那我也来给大家整上花活~

前言:看了很久,大家是真的🐂🍺,月球绕地球都整出来了,那我也来给大家整上花活~然后送上中秋祝福:月儿圆又亮,月饼圆又甜,家家团圆相聚,人人欢心甜蜜,祝你家圆人圆事事圆,中秋愉快!

不妨点个赞啦,看到这篇文章的帅哥~

app中秋的引导界面:(完整效果截图在最后哦~)

效果图.gif

功能解析:

1.状态变化:背景和展示出来的诗篇与日期有关,日期不同,背景和诗篇不同

2.文字特效:中秋祝福的诗篇会一字一字慢慢浮现

3.倒计时处理:人性化,用户不想看直接跳过

1.状态变化:

我们定义一个变量date来控制状态,获取当前的日期来进行判断:

int _date = 1; //控制状态
DateTime _dateTime = DateTime.now(); //获取当前时间

然后在初始化时进行判断:

@override
  void initState() {
    super.initState();
    if (_dateTime.day <= 19) {
      ///19号之前,人们都在回家的路上
      _date = 1;
    } else if (_dateTime.day == 20) {
      ///20号,人们回到家中,吃上团圆饭
      _date = 2;
    } else if (_dateTime.day == 21) {
      ///21号,中秋快乐
      _date = 3;
    } else {
      ///中秋过后,亲人回到忙碌的生活,期盼着下一次团聚
      _date = 4;
    }
  }

关于flutter如何获取时间,我给大家列出来了(送给新人,大神看了就图一乐~)

DateTime dateTime= DateTime.now();
dateTime.day 今天是几号,int类型
dateTime.month 
dateTime.year 
dateTime.hour
dateTime.minute
dateTime.second
dateTime.millisecond
dateTime.millisecondsSinceEpoch

2.文字特效

就像开始的gif图显示的一样,文字一个个浮现出来,其实这个很简单,我们可以自己diy,但是,广大热心程序猿给我们提供了插件:animated_text_kit

使用起来也很简单:

AnimatedTextKit(
  animatedTexts: [
    TyperAnimatedText(
      "Test文字",
      textStyle: TextStyle(fontSize: 22),
      speed: const Duration(milliseconds: 200),
    ),
  ],
  isRepeatingAnimation: false,//不循环播放
)

而且还有很多很多的效果,这里给大家列了出来,需要的可以查看文章最下方的项目源码

当然,在这里也是有难点的,因为flutter的文字无法竖排,网上有改源码的(我觉得复杂了)问了下朋友,说使用RotatedBox这个widget,但是我这看个der啊,你这竖的一个妙啊!

屏幕截图 2021-09-14 190155.jpg

所以最后我选择使用给每个文字后面加上/n 我直接手动换行,求求大神来告诉我解决方法(要不我自己写个插件哈哈)

3.倒计时处理

我们搞前端的必须要做一个人性化的东西给客户是不是

手动跳转加上:

int _countdown = 5;//五秒倒计时
Timer _countdownTimer;//控制倒计时

当然我们需要一个方法来控制倒计时,以及倒计时结束跳转:

void _startRecordTime() {
  _countdownTimer = Timer.periodic(Duration(seconds: 1), (timer) {
    setState(() {
      if (_countdown <= 1) {
        ///此处编写你需要跳转的界面
         _countdownTimer.cancel();
         _countdownTimer = null;
      } else {
        _countdown -= 1;
      }
    });
  });
}

当然,在倒计时结束或者跳转时,记得把界面销毁~

@override
void dispose() {
  super.dispose();
  print('启动页面结束');
  if (_countdownTimer != null && _countdownTimer.isActive) {
    _countdownTimer.cancel();
    _countdownTimer = null;
  }
}
onTap: () {
  ///点击跳过,在此处可以写跳转
  print("点击跳过,在此处可以写跳转代码,记得销毁界面哦");
},

完整效果:
屏幕截图 2021-09-14 195121.jpg

屏幕截图 2021-09-14 195203.jpg

屏幕截图 2021-09-14 195320.jpg

屏幕截图 2021-09-14 195345.jpg

源码地址:https://gitee.com/Xiao-Ti/autumn

相关文章
|
5月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
|
2月前
|
缓存 数据处理 UED
App加载页面的等待体验设计技巧
App加载页作为整个用户体验的一部分,直接影响用户对于产品服务的忠诚度和满意度。
58 13
|
8月前
|
移动开发 JavaScript 前端开发
如何识别app中的页面是否是js(h5)页面
如何识别app中的页面是否是js(h5)页面
102 2
|
3月前
|
前端开发 UED 开发者
uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)
本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。
|
5月前
|
应用服务中间件 Linux 网络安全
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
|
5月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
5月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
5月前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
5月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service中,为Java应用配置自定义错误页面,禁用DELETE, PUT方法
【Azure 应用服务】App Service中,为Java应用配置自定义错误页面,禁用DELETE, PUT方法
【Azure 应用服务】App Service中,为Java应用配置自定义错误页面,禁用DELETE, PUT方法
|
5月前
|
Java 应用服务中间件 Windows
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面