Flutter-4( 路由 )无状态匿名路由导航首页一、组件类型这是一个OutlinedButton（轮廓按钮）组

无状态匿名路由导航

首页

OutlinedButton(
    onPressed: () {
      print("OutLinebutton");
      Navigator.push(context,MaterialPageRoute(builder: (context)=>Details()));
    },
    child: Text("OutLinebutton")),

一、组件类型

这是一个OutlinedButton（轮廓按钮）组件。这种按钮通常具有一个边框，没有填充颜色或只有轻微的填充效果，在视觉上比较简洁。

二、按钮行为

onPressed属性定义了按钮被点击时的行为。在这个例子中，当按钮被点击时，会执行以下操作：
- print("OutLinebutton");：在控制台打印 “OutLinebutton”，用于调试或确认按钮是否被点击。
- Navigator.push(context, MaterialPageRoute(builder: (context) => Details()));：使用Navigator进行页面导航。push方法用于将一个新的页面推送到导航栈中。这里创建了一个MaterialPageRoute，它是 Flutter 中用于在 Material Design 风格应用中进行页面过渡的路由对象。builder属性接受一个函数，该函数返回要导航到的页面，这里是一个新的Details组件实例。

三、按钮外观

child属性是一个Text组件，显示文本 “OutLinebutton”，作为按钮上的标签。

详情页面

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

class Details extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("详情$context");
    return Column(
      children: [
        Text('详情'),
        ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Text('返回上一个页面'))
      ],
    );
  }
}

以下是对这段代码的分析：

一、导入的包

package:flutter/cupertino.dart：提供了适用于 iOS 风格的 UI 组件。
package:flutter/material.dart：提供了 Material Design 风格的 UI 组件，这是 Flutter 中常用的包，包含了大量的布局、组件和主题等。

二、类定义

class Details extends StatelessWidget：定义了一个名为Details的无状态组件，无状态组件在构建时不依赖于可变状态，一旦构建完成，其外观不会随着时间改变，除非父组件的配置发生变化。

三、构建方法

@override 表示重写父类的方法。在build方法中，返回一个Column组件，它是一个垂直排列子组件的布局组件。
- children属性接收一个子组件列表，这里包含了一个Text组件和一个ElevatedButton组件。
  - Text('详情')：显示文本 “详情”。
  - ElevatedButton：是一个带有阴影效果的按钮。
    - onPressed属性是一个回调函数，当按钮被点击时执行。这里调用Navigator.pop(context)，表示返回到上一个页面，Navigator是 Flutter 中用于页面导航的类，pop方法用于从导航栈中移除当前页面并返回上一个页面。
    - child属性是按钮上显示的文本，这里是一个常量Text('返回上一个页面')。

这段代码定义了一个 Flutter 页面，页面上显示 “详情” 文本和一个 “返回上一个页面” 的按钮，点击按钮可以返回到上一个页面。

命名路由

import 'package:flutter/material.dart';
import 'package:untitled/pages/home_page.dart';
import 'package:untitled/pages/about.dart';
import 'package:untitled/pages/details.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/':(context)=>HomePage(),
        '/about':(context)=>About(),
        '/details':(context)=>Details(),
      }
    );
  }
}

一、功能概述

这段代码是一个 Flutter 应用的入口点。它创建了一个 MaterialApp，设置了初始路由为 '/'，并定义了三个路由，分别对应 HomePage、About 和 Details 三个页面。

二、代码详解

导入部分：
- 导入了必要的 Flutter 包以及应用中的三个页面文件。
main函数：
- 调用runApp函数启动应用，并传入MyApp小部件作为应用的根小部件。
MyApp类：
- 继承自StatelessWidget，表示这是一个无状态的小部件。
- build方法返回一个MaterialApp小部件，设置了初始路由和路由映射。

录屏2024-09-19 14.27.39.gif

路由传参

首页

String title = '我是首页';

onTap: (){
  print("点击了");
  Navigator.pushNamed(context, '/about',arguments: title);
},

about接收

String title = ModalRoute.of(context)!.settings.arguments as String;

Text('$title', style: optionsStyle),