Flutter CupertinoApp - Dart

如果你正在开发一个运行在 iOS 设备上的 Flutter 应用程序，那么你可能想要在这个应用程序中使用 iOS 风格的 UI 组件。Flutter 的 CupertinoApp 为你提供了从 iOS 系统获得启发的 UI 界面，如滑动选择器、导航栏等。

如何使用 CupertinoApp

可以按照如下步骤使用 CupertinoApp：

1. 在 pubspec.yaml 中添加 cupertino_icons 依赖，以便使用 Cupertino 风格的图标
2. 在 MaterialApp 的位置使用 CupertinoApp
3. 在 CupertinoApp 内部使用 CupertinoPageScaffold 或 CupertinoTabScaffold 等 Cupertino 风格的布局组件

下面的代码片段演示了如何使用 CupertinoApp、CupertinoPageScaffold 和 CupertinoTabScaffold：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'CupertinoApp Example',
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.profile_circled),
              label: 'Profile',
            ),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (BuildContext context) {
              return CupertinoPageScaffold(
                navigationBar: CupertinoNavigationBar(
                  middle: Text('Page $index'),
                ),
                child: Center(
                  child: Text('This is page $index'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Cupertino 风格的组件

CupertinoApp 并不会自动转换你的应用程序中的所有组件为 iOS 风格的。因此，你需要使用 Cupertino 风格的组件，如：

• CupertinoButtons
• CupertinoTextField
• CupertinoSwitch
• CupertinoSlider
• CupertinoAlertDialog

更多的 Cupertino 风格的组件，可以查看 Flutter 官方文档中 Cupertino widgets 的部分。

主题

CupertinoApp 的主题可以通过 CupertinoTheme 组件进行配置，包括：

• brightness：主题的亮度，可以是 Brightness.light 或 Brightness.dark
• primaryColor：主要颜色，例如，使用 CupertinoColors.activeBlue 可以获得 iOS 标准的蓝色
• textTheme：文本主题，包括标题、副标题、正文和按钮的样式

下面的代码片段演示了如何使用 CupertinoTheme：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'CupertinoApp Example',
      theme: CupertinoThemeData(
        brightness: Brightness.light,
        primaryColor: CupertinoColors.activeBlue,
        textTheme: CupertinoTextThemeData(
          textStyle: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.profile_circled),
              label: 'Profile',
            ),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (BuildContext context) {
              return CupertinoPageScaffold(
                navigationBar: CupertinoNavigationBar(
                  middle: Text('Page $index'),
                ),
                child: Center(
                  child: Text('This is page $index'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

总结

CupertinoApp 是一个非常有用的 Flutter 组件，可以帮助你快速构建漂亮的 iOS 风格的应用程序。使用 CupertinoApp，你可以使用自己喜欢的 Cupertino 风格的组件，以及自定义你的应用程序的主题。