fluuter入门与实战

最新推荐文章于 2025-03-31 10:18:48 发布

qq_31535517

最新推荐文章于 2025-03-31 10:18:48 发布

阅读量367

点赞数

本文链接：https://blog.youkuaiyun.com/qq_31535517/article/details/103292828

版权

本文主要介绍了Flutter的初步使用，包括实现沉浸式状态栏、图片加载功能以及如何进行页面间的跳转，帮助开发者快速上手Flutter开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述 @TOC

沉浸式状态栏
图片加载
页面跳转

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';

//加载页面
/**
 * StatefulWidget有状态组件 表示属性可变(即UI可刷新)
 * 实现需要两个类
 * StatefulWidget
 *State
 */
class SplashPage extends StatefulWidget {
  @override
  _SplashState createState() => new _SplashState();
}

class _SplashState extends State<SplashPage> {
//在 State 对象被插入视图树时调用。在 State 的生命周期中只会被调用一次，因此可以在 initState 函数中做一些初始化操作
  @override
  void initState(){
    super.initState();
    //在加载页面停顿3秒
    new Future.delayed(Duration(seconds: 3),(){
      //pushReplacementNamed()跳转之后不能再返回
      Navigator.of(context).pushReplacementNamed("LoginPage");
    });
  }

  @override
  Widget build(BuildContext context) {
    //设置沉浸式状态栏
    if (Platform.isAndroid) {
      SystemUiOverlayStyle systemUiOverlayStyle =
      SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    }
    //在Center居中不居中，子元素处于水平和垂直方向的中间位置
    return new Center(
      //它可以使子组件堆叠起来，但是它比 FrameLayout 要强大，它可以控制子组件的位置
      child: Stack(
        children: <Widget>[
          //加载页面居中背景图  BoxFit.cover使显示可能拉伸，可能裁剪，充满
          Image.asset("assets/images/loading.jpeg",fit: BoxFit.cover,),
        ],
      ),
    );
  }

}