Material 和 Cupertino widgets 是什么？

Question

Accepted Answer

Flutter 提供两个主要的设计系统作为 widget 集合：**Material**（Google 的 Material Design，Android 风格）和 **Cupertino**（iOS 风格）。它们让你能够构建与每个平台设计语言相匹配的 UI，或者呈现一致的自定义外观。

## Material widgets (Material Design)

```dart
// Material widgets follow Google's Material Design (Android look, but usable anywhere)
MaterialApp(                       // the app root for Material apps
  home: Scaffold(                  // Material page structure
    appBar: AppBar(title: Text('Material')),
    body: Center(
      child: ElevatedButton(       // Material button
        onPressed: () {},
        child: Text('Material Button'),
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
)
// Material widgets: Scaffold, AppBar, ElevatedButton, Card, FloatingActionButton, etc.
```

## Cupertino widgets (iOS style)

```dart
// Cupertino widgets follow Apple's iOS design language
CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(middle: Text('iOS')),
    child: Center(
      child: CupertinoButton(      // iOS-style button
        onPressed: () {},
        child: Text('iOS Button'),
      ),
    ),
  ),
)
// Cupertino widgets: CupertinoButton, CupertinoNavigationBar, CupertinoPicker, etc.
```

## 选择和平台自适应 UI

```text
→ MATERIAL → most common default; works on all platforms; Google's design system
→ CUPERTINO → for an authentic iOS look
→ Many apps just use Material everywhere (consistent, simpler) — Flutter draws its own
  UI, so Material works fine on iOS too
→ PLATFORM-ADAPTIVE → use Material on Android, Cupertino on iOS (native feel per platform)
  — more effort; choose based on whether platform-native look matters
```

## 为什么这很重要

理解 Material 和 Cupertino widgets 是有价值的，因为它们是 Flutter 的两个主要设计系统，提供了用于构建应用 UI 的 widgets，所以这是有用的基础知识。**Material widgets**（实现 Google 的 Material Design，即 Android 风格设计语言）是最常见的默认方案，包括大多数 Flutter 应用中使用的基本 widgets（用于页面结构的 Scaffold、AppBar、按钮、Cards、FloatingActionButton）——理解它们是必要的，因为绝大多数 Flutter 应用都使用 Material。**Cupertino widgets**（实现 Apple 的 iOS 设计语言）让你能够构建真正看起来像 iOS 的界面。

理解两者以及**如何选择**在实践中是有价值的：许多应用简单地**到处使用 Material**（一致且更简单，由于 Flutter 自己绘制 UI，Material 即使在 iOS 上也工作得很好），而想要**平台原生外观**的应用可以使用**平台自适应方法**（Android 上使用 Material，iOS 上使用 Cupertino，以更多努力为代价为每个平台提供其原生的外观）。

理解这种选择——处处使用一致的 Material（更简单）与平台自适应（每个平台具有原生感）——反映了 Flutter 开发中的真实设计决策。

了解可用的 widget 集合及其设计系统对于构建看起来合适的 UI 是基础性的，无论是匹配平台约定还是呈现一致的自定义设计。

由于构建 Flutter UI 需要使用这些 widget 集合（Material 是常见的默认方案，Cupertino 用于 iOS 风格），并且理解它们以及一致性与平台自适应设计之间的选择对于创建外观适当的应用是有用的，所以理解 Material 和 Cupertino widgets 是有价值的、基础性的 Flutter 知识——对于构建 UI（特别是无处不在的 Material widgets）是必要的，对于做出关于应用外观和平台约定的健全决策是有用的，这是日常 Flutter UI 开发的实用方面。