Flutter启动页倒计时3秒跳转

创建启动页
 

// 导入Flutter材料设计组件库，用于构建UI
import 'package:flutter/material.dart';
// 导入Dart异步编程库，用于计时器功能
import 'dart:async';
// 导入主页面文件
import 'package:news_hawar/main.dart';

// 启动屏组件 - 显示应用启动时的欢迎界面
class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

// 启动屏的状态类
class _SplashScreenState extends State<SplashScreen> {
  // 倒计时计数器，初始值为3秒
  int _countdown = 3;
  // 计时器对象，用于管理倒计时
  Timer? _timer;

  // 组件初始化时调用的方法
  @override
  void initState() {
    // 调用父类的initState方法，确保Flutter框架正确初始化
    super.initState();
    // 启动倒计时功能
    startCountdown();
  }

  // 启动倒计时功能
  void startCountdown() {
    // 创建一个周期性计时器，每秒执行一次
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      // 使用setState更新UI状态
      setState(() {
        // 倒计时减1
        _countdown--;

        // 检查倒计时是否结束（小于等于0）
        if (_countdown <= 0) {
          // 取消计时器，停止倒计时
          timer.cancel();
          // 跳转到主页面
          goHome();
        }
      });
    });
  }

  // 跳转到主页面的方法
  void goHome() {
    // 使用导航器替换当前页面到主页面
    // pushReplacement会替换当前路由，用户无法返回到启动屏
    Navigator.pushReplacement(
      context,
      // 创建材料设计页面路由，构建主页面
      MaterialPageRoute(builder: (context) => const MainPage()),
    );
  }

  // 组件销毁时调用的方法，用于资源清理
  @override
  void dispose() {
    // 取消计时器，防止内存泄漏
    _timer?.cancel();
    // 调用父类的dispose方法
    super.dispose();
  }

  // 构建UI界面的方法
  @override
  Widget build(BuildContext context) {
    // 使用Scaffold作为页面骨架
    return Scaffold(
      // 设置页面主体
      body: Stack(
        // Stack的子组件会堆叠在一起
        // StackFit.expand让Stack填充整个可用空间
        fit: StackFit.expand,
        children: [
          // 背景图片 - 欢迎图片
          Image.asset(
            // 图片资源路径
            'assets/images/welcome.jpg', 
            // 图片填充方式：覆盖整个区域，可能裁剪图片
            fit: BoxFit.cover
          ),
          
          // 倒计时显示组件 - 使用Positioned定位在右上角
          Positioned(
            // 距离顶部的距离：60.0逻辑像素
            top: 60.0,
            // 距离右侧的距离：30.0逻辑像素
            right: 30.0,
            // 容器组件，用于包装倒计时文本
            child: Container(
              // 内边距：水平12.0，垂直6.0
              padding: const EdgeInsets.symmetric(
                horizontal: 12.0,
                vertical: 6.0,
              ),
              // 容器装饰
              decoration: BoxDecoration(
                // 背景颜色：黑色带50%透明度
                color: Colors.black.withOpacity(0.5),
                // 边框圆角：6.0像素半径
                borderRadius: BorderRadius.circular(6.0),
                // 盒子阴影效果
                boxShadow: [
                  BoxShadow(
                    // 阴影颜色：黑色带30%透明度
                    color: Colors.black.withOpacity(0.3),
                    // 阴影模糊半径：3.0像素
                    blurRadius: 3.0,
                    // 阴影扩散半径：1.0像素
                    spreadRadius: 1.0,
                  ),
                ],
              ),
              // 倒计时文本显示
              child: Text(
                // 显示倒计时数字和维吾尔语"ئاتلاش"（意为"跳过"）
                '$_countdown ئاتلاش',
                // 文本样式
                style: const TextStyle(
                  // 文字颜色：白色
                  color: Colors.white,
                  // 字体粗细：粗体
                  fontWeight: FontWeight.bold,
                  // 字体大小：16.0
                  fontSize: 16.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}