Flutter路由管理及State生命周期

main.dart

import 'package:flutter/material.dart';
import 'Homescreen.dart';
import 'SettingScreen.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Material App',
      routes: {
        '/home':(context)=>const Homescreen(),
        '/about':(context)=>const Settingscreen()
      },
      home:const Homescreen(),
    );
  }
}

Homescreen.dart

import 'package:flutter/material.dart';

class Homescreen extends StatefulWidget {
  const Homescreen({super.key});

  @override
  State<Homescreen> createState() => _HomescreenState();
}

class _HomescreenState extends State<Homescreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Material App Bar'),
      ),
      body: Center(
        child: TextButton(
            onPressed: () {
             //不传值
              Navigator.pushNamed(context, '/about');
              //传值
              Navigator.pushNamed(context, '/about',arguments: "Home Value");

            },
            child: const Text("跳转")),
      ),
    );
  }
}

Settingscreen.dart

import 'package:flutter/material.dart';

class Settingscreen extends StatefulWidget {
  const Settingscreen({super.key});

  @override
  State<Settingscreen> createState() => _SettingscreenState();
}

class _SettingscreenState extends State<Settingscreen> {
  @override
  Widget build(BuildContext context) {
  //接收参数
    var params = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Setting App Bar'),
      ),
      body: Center(
        child: TextButton(
            onPressed: () {
              Navigator.pushNamed(context, '/home');
            },
            child: Text('设置,$params')),
      ),
    );
  }
}

state生命周期

import 'package:flutter/material.dart';

class Settingscreen extends StatefulWidget {
  const Settingscreen({super.key});

  @override
  State<Settingscreen> createState() => _SettingscreenState();
}

class _SettingscreenState extends State<Settingscreen> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }

  @override
  void setState(VoidCallback fn) {
    // TODO: implement setState
    super.setState(fn);
  }

  @override
  void didUpdateWidget(covariant Settingscreen oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void reassemble() {
    // TODO: implement reassemble
    super.reassemble();
  }


  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    var params = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Setting App Bar'),
      ),
      body: Center(
        child: TextButton(
            onPressed: () {
              Navigator.pushNamed(context, '/home');
            },
            child: Text('设置,$params')),
      ),
    );
  }
}

image Wiget

• 远程图片

 Image.network(http地址)   

• 本地图片

1. 第一步 首先根目录新建文件夹存放自己的图片，然后在在pubspec.yaml配置信息(yaml注意空格)

    flutter:
     assets:
        - images/a_dot_burr.jpeg
        - images/a_dot_ham.jpeg

3. 第二步

Image.assets(本地路径)

DartIO修改为第三方Dio请求

不赘述，可以看懂(懒不想动)

pub.dev/packages/di…

留言：Flutter的Wiget非常多需要长期积累以及ReactHooks非常多需要长期积累，React核心是数据控制和数据更新,异步操作是靠第三方支撑例如Trunk和Sega

下期：会阐述无痕浏览器和普通浏览器区别，以及发布相关Widget和Hooks以及RN路由，DIO实现Flutter的Http请求，或者宝塔搭建流程，ionic组件，IDEA快捷键，或者SpringMVC的WebMvcConfigurer,或者SpringDataRedis等等吧（懒）