Flutter Cupertino 教程：如何构建外观和感觉原生的 iOS 应用

所有前端应用程序都使用某种设计系统来帮助用户更轻松地完成任务。他们可能会使用内部开发的定制设计系统或成熟的设计系统，例如 Material Design 或 Cupertino (iOS)。

Material Design 由 Google 开发，可用于开发 Android、iOS、Web 和桌面应用程序。

Cupertino 由 Apple 开发。它基于 Apple 的人机界面指南，该指南实现了当前的 iOS 设计语言。

Flutter SDK 附带 Material 和 Cupertino 小部件库，用于开发一个外观和感觉都适用于任一平台的应用程序。

你仍然可以仅仅使用Material widgets库来构建一个应用程序。然而，如果你想建立一个看起来像标准iOS风格的应用程序，你应该强烈考虑使用Cupertino库。

在本教程中，我们将构建一个底部有三个选项卡的简单应用程序；通话、聊天和设置。

在通话标签上，我们将添加简单的导航栏；聊天标签将显示会员列表，并允许最终用户搜索任何会员；在设置标签上，我们将使用各种Cupertino风格的部件来建立设置页面。

这是最终应用程序的外观：

1.创建一个简单的页面

让我们先创建一个简单的页面，在顶部显示页面标题，在中间显示 "Hello "信息。要建立这样一个页面，你必须删除新创建的项目的所有内容，用下面的代码代替它：

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

import 'simple_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]).then((value) => runApp(MyApp()));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 1 <-- SEE HERE
    return CupertinoApp(
      // 2 <-- SEE HERE
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: CupertinoSimpleHomePage(),
    );
  }
}

class CupertinoSimpleHomePage extends StatefulWidget {
  const CupertinoSimpleHomePage({Key? key}) : super(key: key);

  @override
  _CupertinoSimpleHomePageState createState() =>
      _CupertinoSimpleHomePageState();
}

class _CupertinoSimpleHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    // 3 <-- SEE HERE
    return const CupertinoPageScaffold(
      // 4 <-- SEE HERE
      navigationBar: CupertinoNavigationBar(
        middle: Text('Chat App'),
      ),
      child: Center(
        child: Text('Hi'),
      ),
    );
  }
}

代码说明：

• CupertinoApp：CupertinoApp小组件允许你添加小组件，这些小组件主要用于建立一个iOS风格的应用程序。
• CupertinoThemeData：使用此小部件，您可以指定应用的样式
• CupertinoPageScaffold：CupertinoPageScaffold 有助于构建页面的布局，例如添加导航栏
• CupertinoNavigationBar：这个小部件创建一个看起来像原生 iOS 风格的导航栏。