本章节介绍如何在应用程序的页面之间导航、推送和弹出机制等。

导航

一、在页面之间导航

开发人员使用称为navigation routes，用于在不同页面构建iOS和macOS应用程序。

在SwiftUI中，NavigationStack代表这一堆页面。

以下示例创建了一个显示人员列表的应用程序。要在新的导航链接中显示某人的详细信息，请点击该页面。

NavigatiioonStack(path: $path) {
    List {
        ForEach(persons) { person in
            NavigationLink(
                person.name,
                value: person
            )
        }
    }
    .navigationDestination(for: Person.self) {person in
        PersonView(person: person)
    }
}

如果你有一个没有负载链接的小型Flutter Navigator应用程序，请使用命名路由。定义导航路线后，使用名称调用导航路线。

1. 命名传递给runApp()函数的类中的每个路由。以下示例使用App：

import 'package:flutter/cupertino.dart';

// Defines the route name as a constant
//so that it'ss reusable
const detailsPageRouteName = '/details';

class App extends StatelessWidget {
    const App({Key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        return CupertinoApp(
            home: const HomePage(),
            // The [routes] property defines the available named routes
            // and the widgets to build when navigating to those routes.
            routes: {
                detailsPageRouteName: (context) => const DetailPage(),
            }
        );
    }
}

以下示例生成使用的人员列表mockPersons()。点击一个人会将此人的详细信息页面推送到Navigator using pushNamed()

ListView.builder(
    itemCount: mockPersons.length,
    itemBuilder: (context, index) {
      final person = mockPersons.elementAt(index);
      final age = '${person.age} years old';
      return ListTile(
        title: Text(person.name),
        subtitle: Text(age),
        trailing: const Icon(
          Icons.arrow_forward_ios,
        ),
        onTap: () {
          // When a [ListTile] that represents a person is
          // tapped, push the detailsPageRouteName route
          // to the Navigator and pass the person's instance
          // to the route.
          Navigator.of(context).pushNamed(
            detailsPageRouteName,
            arguments: person,
          );
        },
      );
    },
);

1. 定义DetailsPage显示每个人详细信息的小部件。在Flutter中，您可以在导航到新路由时将参数传递给小部件。使用提取参数ModalRoute.of():

class DetailPage extends StatelessWidget {
   const DetailPage({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    // Read the person instance from the arguments
    final Person person = ModalRoute.of(
      context,
    )?.settings.arguments as Person;
    // Extract the age.
    final age = '${person.age} years old';
    return MaterialApp(
        home:Scaffold(
          body: Column(
            children: [
              Text(person.name),
              Text(age),
            ],
          ),
      ),
    );
  }
}

要创建更高级的导航和路由要求，请使用路由包，例如go_router。

要了解更多信息，请查看导航和路由。

二、手动回弹

在SwiftUI中，您可以使用dismiss环境值弹出回到上一个屏幕。

Button("Pop back") {
    dismiss()
}

在Flutter中，使用Navigator.pop()

TextButton(
    onPressed: () {
        // This code allows the
        // view to pop back to its presenter.
        Navigator.of(context).pop();
    },
    child: const Text('Pop back'),
),

三、导航到另一个应用程序

在SwiftUI中，您使用openURL环境变量打开另一个应用程序的URL。

@Enviroment(\.openURL) private var openUrl

// View code goes here

Button("Open website") {
    openUrl(
        URL(
            string: "https://google.com"
        )!
    )
}

在Flutter中，使用url_launcher插件。

CupertinoButton(
    onPressed: () async {
        await launchUrl(
            Uri.parse('https://google.com')
        );
    },
    child: const Text(
        'Open website'
    ),
),

主题、风格和媒体

您可以毫不费力地设计Flutter应用程序的样式。样式设置包括在浅色和深色主题之间切换、更改文本和UI组件的设计等。

一、使用深色模式

在SwiftUI，您调用perferredColorScheme()方法，使View显示暗模式。

在Flutter中，您可以在应用程序级别控制明暗模式。要控制亮度模式，请使用App的属性theme。

CupertinoApp(
    theme: CupertinoThemeData(
        brightness: Brightness.dart,
    ),
    home: HomePage(),
);

二、样式文本

在SwiftUI中，您可以使用修饰符函数来设置文本样式。例如，要更改Text字符串的字体，请使用font()修饰符：

Text("Hello, world!")
    .font(.system(size: 30, weight: .heavy))
    .foregroundColor(.yellow)

要在Flutter中设置文本样式，请添加一个TextStyle小部件作为下部件Text的属性style.

Text(
    'Hello, world!',
    style: TextStyle(
        fontSize: 30,
        fontWeight: FontWeight.bold,
        color: CuperttinoColors.systemYellow,
    ),
),

三、样式按钮

在SwiftUI中，您可以使用修饰符函数垃圾设置按钮样式。

Button("Do something") {
    // do something when button is tapped
    }
    .font(.system(size: 30, weight: .blod))
    .background(Color.yellow)
    .foregroundColor(Color.blue)
}

要在Flutter中设置按钮小部件的样式，请设置其子项的样式，或修改按钮本身的属性。

在以下示例中：

• 给CuoertinoButton属性color设置color
• 给按钮文本属性color设置文本颜色。

child: CupertinoButton(
  color: CupertinoColors.systemYellow,
  onPressed: () {},
  padding: const EdgeInsets.all(16),
  child: const Text(
    'Do something',
    style: TextStyle(
      color: CupertinoColors.systemBlue,
      fontSize: 30,
      fontWeight: FontWeight.bold,
    ),
  ),
)

四、使用自定义字体

在SwiftUI中，您可以分两步在您的应用程序中使用自定义字体。首先，将字体文件添加到您的SwiftUI项目中。添加文件后，使用.font()修饰符将其应用到您的UI组件。

Text("Hello")
    .font(
        Font.custom(
            "BungeeSpice-Regular",
            size: 40
        )
    )

在Flutter中，您可以使用名为pubspec.yaml该文件与平台无关。要将自定义字体添加到您的项目，请执行以下步骤：

1. 在项目的根目录中创建了一个font文件夹。此可选步骤有助于组织您的字体文件。
2. 将您的.ttf、.otf或.ttc字体文件添加到该fonts文件夹中。
3. 打开pubspec.yaml项目中的文件。
4. 找到该flutter部分。
5. 在该部分下添加您的自定义字体。

flutter:
 font:
     - family: BungeeSpice
       fonts:
           - asset: font/BungeeSpice-Regular.ttf

将字体添加到项目后，您可以使用它，如下所示：

Text(
    'Cupertino',
    style: TextStyle(
        fontSize: 40,
        fontFamily: 'BungeeSpice',
    ),
)

五、在应用程序中捆绑图像

在SwiftUI中，首先将图像文件添加到Assetss.xcassets，然后使用Image视图显示图像。

要在Flutter中添加图像，请遵循类似于添加自定义字体的方法。

1. 将文件夹添加images到根目录
2. 将此assets添加到pubspec.yaml文件夹

flutter:
 assets:
     - images/Blueberries.jpg

添加图像后，使用Image小部件的 .asset()构造函数显示它。这个构造函数：

1. 使用提供的路径实例化给定的图像。
2. 从您的应用程序捆绑的资产中读取图像。
3. 在屏幕上显示图像。

要查看完整示例，请查看Image文档

六、在应用程序中捆绑视频

在SwiftUI中，您可以分两步将本地视频文件与您的应用捆绑在一起。首先，导入AVKit框架，然后实例化 VideoPlayer视图。

在Flutter中，将video_player插件添加到您的项目中。此插件允许您使用相同的代码库创建适用于 Android、iOS 和 Web 的视频播放器。

1. 将插件添加到您的应用程序并将视频文件添加到您的项目。
2. 将资产添加到您的pubspec.yaml文件中。
3. 使用VideoPlayerController该类加载和播放您的视频文件。

要查看完整的演练，请查看video_player 示例。