关于不同平台组件风格的问题

Question

视频中老师在导入StatefulWidget时，说了 ‘package:flutter/material.dart’ 是安卓风格的组件， ‘package:flutter/cupertino.dart’ 是IOS风格的组件，最后老师选的是’package:flutter/material.dart’ 安卓风格。

我想问一下，开发Android和IOS双平台的APP时，如果要APP更贴合系统风格，是不是要分开各自编写一套符合当前平台的组件布局呢？Android用’material.dart’， IOS用’cupertino.dart’，那这样感觉flutter的跨平台也要写两套UI代码了，好像并没有太方便。

不知道是不是我的理解有误还是的确是这样，还请老师指点一下。谢谢老师

Answer 1

CrazyCodeBoy 2025-02-10 09:15:46

你的理解是对的，Flutter 提供了 Material 组件（Android 设计风格）和 Cupertino 组件（iOS 设计风格），但如果你想让 APP 适配不同平台的 UI 规范，并不一定要写两套 UI 代码。Flutter 提供了几种方式来帮助你优雅地实现平台适配：


---

1. 使用 Theme.of(context).platform 进行条件渲染

你可以根据 Theme.of(context).platform 来判断当前平台，然后动态渲染不同的组件：

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

Widget build(BuildContext context) {
  return Theme.of(context).platform == TargetPlatform.iOS
      ? CupertinoButton(
          child: Text("我是 iOS 按钮"),
          onPressed: () {},
        )
      : ElevatedButton(
          child: Text("我是 Android 按钮"),
          onPressed: () {},
        );
}

这样你可以在一个 Widget 里管理不同平台的 UI 逻辑，而不是写两套完全独立的 UI 代码。


---

2. 使用 Platform.isIOS 进行判断

如果不想使用 Theme.of(context).platform，也可以直接用 dart:io 提供的 Platform 类来判断平台：

import 'dart:io';

Widget build(BuildContext context) {
  return Platform.isIOS
      ? CupertinoSwitch(value: true, onChanged: (bool value) {})
      : Switch(value: true, onChanged: (bool value) {});
}

但是 Platform 只能在非 Web 端使用（Flutter Web 不支持 dart:io），所以如果你的项目有 Web 需求，建议使用 Theme.of(context).platform。


---

3. 使用 flutter_platform_widgets 插件

如果不想手动写 if-else 判断，你可以使用 flutter_platform_widgets 插件，它会根据平台自动选择 Material 或 Cupertino 风格的组件：

dependencies:
  flutter_platform_widgets: ^6.0.0

然后在代码中：

import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';

Widget build(BuildContext context) {
  return PlatformWidget(
    material: (_, __) => ElevatedButton(
      child: Text("我是 Material 按钮"),
      onPressed: () {},
    ),
    cupertino: (_, __) => CupertinoButton(
      child: Text("我是 Cupertino 按钮"),
      onPressed: () {},
    ),
  );
}

这个插件可以自动在 Android 和 iOS 上使用合适的 UI 组件，省去了手动判断的麻烦。


---

4. 使用 Adaptive 组件（推荐）

Flutter 的部分组件已经支持 adaptive 适配，比如 Switch.adaptive()、CircularProgressIndicator.adaptive() 这些组件会根据系统自动适配风格：

Widget build(BuildContext context) {
  return Switch.adaptive(
    value: true,
    onChanged: (bool value) {},
  );
}

在 Android 上会渲染 Material Switch，在 iOS 上会渲染 Cupertino Switch，这是最推荐的方式。


---

总结

1. Theme.of(context).platform：适用于需要手动适配的平台组件。


2. Platform.isIOS：适用于不需要 Web 兼容的情况。


3. flutter_platform_widgets 插件：适用于想简化平台判断的情况。


4. 使用 adaptive 组件（推荐）：适用于 Flutter 内置的自动适配组件，最简洁。



如果你想让 UI 更贴合平台设计规范，同时保持跨平台开发的便利，建议优先使用 adaptive 组件，然后再考虑 flutter_platform_widgets 插件，最后才使用 Theme.of(context).platform 或 Platform.isIOS 来做更细节的自定义适配。

这样，你既能实现符合 iOS 和 Android 风格的 UI，又能保持 Flutter 的跨平台优势，避免写两套完全独立的 UI 代码。

• 提问者 LBruce #1

  明白了，看来UI如果没有特别要求，双平台使用一套统一风格UI会比较省事。谢谢老师

• 提问者 LBruce #2

  老师，我还有个问题，像写组件时需要继承StatefulWidget或者StatelessWidget，它们也是要导包material.dart或者cupertino.dart的，这个导入任一个包即可吗？比如StatefulWidget导入的包是material.dart，然后在
  Widget build(BuildContext context) {
      return xxxx
    }
  中使用adaptive组件，flutter_platform_widgets插件等方式进行规范适配