自动平台改编

自适应理念

一般来说,平台自适应性有两种情况

  1. 操作系统环境的行为(例如文本编辑和滚动),如果采用不同的行为,则会“出错”。
  2. 使用 OEM SDK 在应用中实现的传统功能(例如在 iOS 上使用并行标签页或在 Android 上显示 android.app.AlertDialog)。

本文主要介绍 Flutter 在 Android 和 iOS 上针对第 1 种情况提供的自动自适应功能。

对于第 2 种情况,Flutter 捆绑了生成平台惯例适当效果的方法,但当需要应用设计选择时不会自动自适应。有关讨论,请参阅 问题 #8410Material/Cupertino 自适应小组件问题定义

有关在 Android 和 iOS 上使用不同信息架构结构但共享相同内容代码的应用示例,请参阅 platform_design 代码示例

Flutter 提供了在 Android 和 iOS 上看到的导航模式,并且还自动将导航动画调整到当前平台。

Android上,默认的Navigator.push()过渡模仿了startActivity(),它通常有一个自底向上的动画变体。

iOS

  • 默认的Navigator.push()API生成一个iOS显示/推送样式过渡,该过渡根据区域设置的RTL设置从末尾到开头进行动画。新路由后面的页面也像在iOS中一样向同一方向进行视差滑动。
  • 在推送页面路由时存在一个单独的自底向上过渡样式,其中PageRoute.fullscreenDialog为真。这表示iOS的显示/模态样式过渡,通常用于全屏模态页面。
An animation of the bottom-up page transition on Android
Android页面过渡
An animation of the end-start style push page transition on iOS
iOS推送过渡
An animation of the bottom-up style present page transition on iOS
iOS显示过渡

特定于平台的过渡详情

Android上,Flutter使用ZoomPageTransitionsBuilder动画。当用户点击某个项目时,UI会放大到以该项目为特色的屏幕。当用户点击返回时,UI会缩小到前一个屏幕。

iOS上,当使用推送样式过渡时,Flutter捆绑的CupertinoNavigationBarCupertinoSliverNavigationBar导航栏会自动将每个子组件动画到下一页或上一页的CupertinoNavigationBarCupertinoSliverNavigationBar的相应子组件。

Android
An animation of the nav bar transitions during a page transition on iOS
iOS导航栏

返回导航

Android上,默认情况下,操作系统返回按钮会发送到Flutter并弹出WidgetsApp的Navigator的顶部路由。

iOS上,可以使用边缘滑动手势弹出最顶层的路由。

A page transition triggered by the Android back button
Android 返回按钮
A page transition triggered by an iOS back swipe gesture
iOS 返回滑动手势

滚动

滚动是平台外观和感觉的重要组成部分,Flutter 会自动调整滚动行为以匹配当前平台。

物理模拟

Android 和 iOS 都具有复杂的滚动物理模拟,难以用语言描述。通常,iOS 的可滚动元素具有更大的重量和动态摩擦,但 Android 具有更大的静态摩擦。因此,iOS 逐渐获得更高的速度,但停止时不那么突然,并且在低速时更顺滑。

A soft fling where the iOS scrollable slid longer at lower speed than Android
轻柔轻扫比较
A medium force fling where the Android scrollable reached speed faster and stopped more abruptly after reaching a longer distance
中等轻扫比较
A strong fling where the Android scrollable reach speed faster and reached significantly more distance
用力轻扫比较

滚动超出范围的行为

Android上,滚动到可滚动元素的边缘会显示滚动超出范围发光指示器(基于当前 Material 主题的颜色)。

iOS上,滚动到可滚动元素的边缘会滚动超出范围,并且阻力会逐渐增加,然后回弹。

Android and iOS scrollables being flung past their edge and exhibiting platform specific overscroll behavior
动态滚动超出范围比较
Android and iOS scrollables being overscrolled from a resting position and exhibiting platform specific overscroll behavior
静态滚动超出范围比较

动量

iOS上,朝同一方向重复轻扫会叠加动量,并且每次连续轻扫都会产生更大的速度。Android上没有等效的行为。

Repeated scroll flings building momentum on iOS
iOS 滚动动量

返回顶部

iOS上,轻触操作系统状态栏会将主滚动控制器滚动到顶部位置。Android上没有等效的行为。

Tapping the status bar scrolls the primary scrollable back to the top
iOS 状态栏轻触返回顶部

字体排印

使用 Material 包时,字体排印会自动默认为适合该平台的字体系列。Android 使用 Roboto 字体。iOS 使用 San Francisco 字体。

使用 Cupertino 包时,默认主题使用 San Francisco 字体。

San Francisco 字体许可证限制其仅在 iOS、macOS 或 tvOS 上运行的软件中使用。因此,如果平台被调试覆盖为 iOS 或使用了默认的 Cupertino 主题,则在 Android 上运行时会使用备用字体。

你可以选择调整 Material 组件的文本样式以匹配 iOS 上的默认文本样式。你可以在 UI 组件部分 中查看特定于组件的示例。

Roboto font on Android
Android 上的 Roboto
San Francisco font on iOS
iOS 上的 San Francisco

图标

使用 Material 软件包时,某些图标会根据平台自动显示不同的图形。例如,溢出按钮的三个点在 iOS 上是水平的,在 Android 上是垂直的。返回按钮在 iOS 上是一个简单的 V 形,在 Android 上有一个茎/轴。

Android appropriate icons
Android 上的图标
iOS appropriate icons
iOS 上的图标

Material 库还通过 Icons.adaptive 提供了一组平台自适应图标。

触觉反馈

Material 和 Cupertino 软件包会在某些情况下自动触发适合平台的触觉反馈。

例如,通过文本字段长按选择单词会在 Android 上触发“嗡嗡”振动,而在 iOS 上不会。

在 iOS 上滚动选择器项目会触发“轻微冲击”敲击,而在 Android 上没有反馈。

文本编辑

Flutter 还会在编辑文本字段内容时进行以下调整以匹配当前平台。

键盘手势导航

Android 上,可以在软键盘的 space 键上进行水平滑动以在 Material 和 Cupertino 文本字段中移动光标。

在具有 3D Touch 功能的 iOS 设备上,可以在软键盘上进行用力按压拖动手势,以通过浮动光标在 2D 中移动光标。这适用于 Material 和 Cupertino 文本字段。

Moving the cursor via the space key on Android
Android 空格键光标移动
Moving the cursor via 3D Touch drag on the keyboard on iOS
iOS 3D Touch 拖动光标移动

文本选择工具栏

Android 上的 Material 中,当在文本字段中进行文本选择时,会显示 Android 样式选择工具栏。

iOS 上的 Material 或使用 Cupertino 时,当在文本字段中进行文本选择时,会显示 iOS 样式选择工具栏。

Android appropriate text toolbar
Android 文本选择工具栏
iOS appropriate text toolbar
iOS 文本选择工具栏

单点触控手势

使用 Android 上的 Material,在文本字段中单点触控会将光标置于触控位置。

折叠的文本选择也会显示一个可拖动的句柄,以便随后移动光标。

使用 iOS 上的 Material 或使用 Cupertino,在文本字段中单点触控会将光标置于所触控单词的最近边缘。

折叠的文本选择在 iOS 上没有可拖动的句柄。

Moving the cursor to the tapped position on Android
Android 触控
Moving the cursor to the nearest edge of the tapped word on iOS
iOS 触控

长按手势

使用 Android 上的 Material,长按会选择长按下的单词。释放后会显示选择工具栏。

使用 iOS 上的 Material 或使用 Cupertino,长按会将光标置于长按位置。释放后会显示选择工具栏。

Selecting a word via long press on Android
Android 长按
Selecting a position via long press on iOS
iOS 长按

长按拖动手势

使用 Android 上的 Material,在长按时拖动会扩展所选单词。

使用 iOS 上的 Material 或使用 Cupertino,在长按时拖动会移动光标。

Expanding word selection via long press drag on Android
Android 长按拖动
Moving the cursor via long press drag on iOS
iOS 长按拖动

双击手势

在 Android 和 iOS 上,双击会选择接收双击的单词并显示选择工具栏。

Selecting a word via double tap on Android
Android 双击
Selecting a word via double tap on iOS
iOS 双击

UI 组件

本部分包含有关如何调整 Material 小组件以在 iOS 上提供自然且引人入胜的体验的初步建议。欢迎您在 问题 #8427 中提供反馈。

带有 .adaptive() 构造函数的小组件

多个小组件支持 .adaptive() 构造函数。下表列出了这些小组件。当应用程序在 iOS 设备上运行时,自适应构造函数会替换相应的 Cupertino 组件。

下表中的小组件主要用于输入、选择和显示系统信息。由于这些控件与操作系统紧密集成,因此用户已经接受过识别和响应它们的培训。因此,我们建议您遵循平台约定。

Material 小组件 Cupertino 小组件 自适应构造函数
Switch in Material 3
Switch
Switch in HIG
CupertinoSwitch
Switch.adaptive()
Slider in Material 3
Slider
Slider in HIG
CupertinoSlider
Slider.adaptive()
Circular progress indicator in Material 3
CircularProgressIndicator
Activity indicator in HIG
CupertinoActivityIndicator
CircularProgressIndicator.adaptive()
 Checkbox in Material 3
Checkbox
Checkbox in HIG
CupertinoCheckbox
Checkbox.adaptive()
Radio in Material 3
Radio
Radio in HIG
CupertinoRadio
Radio.adaptive()

顶部应用栏和导航栏

自 Android 12 起,顶部应用栏的默认 UI 遵循 Material 3 中定义的设计指南。在 iOS 上,Apple 的 人机界面指南 (HIG) 中定义了一个名为“导航栏”的等效组件。

 Top App Bar in Material 3
Material 3 中的顶部应用栏
Navigation Bar in Human Interface Guidelines
人机界面指南中的导航栏

Flutter 应用程序中应用栏的某些属性应进行调整,例如系统图标和页面过渡。使用 Material AppBarSliverAppBar 小组件时,这些属性已自动调整。您还可以进一步自定义这些小组件的属性,以更好地匹配 iOS 平台样式,如下所示。

// Map the text theme to iOS styles
TextTheme cupertinoTextTheme = TextTheme(
    headlineMedium: CupertinoThemeData()
        .textTheme
        .navLargeTitleTextStyle
         // fixes a small bug with spacing
        .copyWith(letterSpacing: -1.5),
    titleLarge: CupertinoThemeData().textTheme.navTitleTextStyle)
...

// Use iOS text theme on iOS devices
ThemeData(
      textTheme: Platform.isIOS ? cupertinoTextTheme : null,
      ...
)
...

// Modify AppBar properties
AppBar(
        surfaceTintColor: Platform.isIOS ? Colors.transparent : null,
        shadowColor: Platform.isIOS ? CupertinoColors.darkBackgroundGray : null,
        scrolledUnderElevation: Platform.isIOS ? .1 : null,
        toolbarHeight: Platform.isIOS ? 44 : null,
        ...
      ),

但是,由于应用栏与您页面中的其他内容一起显示,因此仅当其与应用程序的其余部分保持一致时,才建议调整样式。您可以在 关于应用栏调整的 GitHub 讨论 中查看其他代码示例和进一步的说明。

底部导航栏

自 Android 12 起,底部导航栏的默认 UI 遵循 Material 3 中定义的设计指南。在 iOS 上,Apple 的 人机界面指南 (HIG) 中定义了一个名为“标签栏”的等效组件。

Bottom Navigation Bar in Material 3
Material 3 中的底部导航栏
Tab Bar in Human Interface Guidelines
人机界面指南中的标签栏

由于选项卡栏在您的应用中是持久的,因此它们应与您自己的品牌相匹配。但是,如果您选择在 Android 上使用 Material 的默认样式,则可以考虑适应默认 iOS 选项卡栏。

要实现特定于平台的底部导航栏,您可以在 Android 上使用 Flutter 的 NavigationBar 窗口小部件,在 iOS 上使用 CupertinoTabBar 窗口小部件。以下是您可以改编以显示特定于平台的导航栏的代码片段。

final Map<String, Icon> _navigationItems = {
    'Menu': Platform.isIOS ? Icon(CupertinoIcons.house_fill) : Icon(Icons.home),
    'Order': Icon(Icons.adaptive.share),
  };

...

Scaffold(
  body: _currentWidget,
  bottomNavigationBar: Platform.isIOS
          ? CupertinoTabBar(
              currentIndex: _currentIndex,
              onTap: (index) {
                setState(() => _currentIndex = index);
                _loadScreen();
              },
              items: _navigationItems.entries
                  .map<BottomNavigationBarItem>(
                      (entry) => BottomNavigationBarItem(
                            icon: entry.value,
                            label: entry.key,
                          ))
                  .toList(),
            )
          : NavigationBar(
              selectedIndex: _currentIndex,
              onDestinationSelected: (index) {
                setState(() => _currentIndex = index);
                _loadScreen();
              },
              destinations: _navigationItems.entries
                  .map<Widget>((entry) => NavigationDestination(
                        icon: entry.value,
                        label: entry.key,
                      ))
                  .toList(),
            ));

文本字段

自 Android 12 起,文本字段遵循 Material 3 (M3) 设计准则。在 iOS 上,Apple 的 人机界面指南 (HIG) 定义了一个等效的组件。

Text Field in Material 3
Material 3 中的文本字段
Text Field in Human Interface Guidelines
HIG 中的文本字段

由于文本字段需要用户输入,
因此它们的设计应遵循平台约定。

要在 Flutter 中实现特定于平台的 TextField,您可以改编 Material TextField 的样式。

Widget _createAdaptiveTextField() {
  final _border = OutlineInputBorder(
    borderSide: BorderSide(color: CupertinoColors.lightBackgroundGray),
  );

  final iOSDecoration = InputDecoration(
    border: _border,
    enabledBorder: _border,
    focusedBorder: _border,
    filled: true,
    fillColor: CupertinoColors.white,
    hoverColor: CupertinoColors.white,
    contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
  );

  return Platform.isIOS
      ? SizedBox(
          height: 36.0,
          child: TextField(
            decoration: iOSDecoration,
          ),
        )
      : TextField();
}

要了解有关改编文本字段的更多信息,请查看 关于文本字段的 GitHub 讨论。您可以在讨论中留下反馈或提出问题。

警报对话框

自 Android 12 起,警报对话框的默认 UI(也称为“基本对话框”)遵循 Material 3 (M3) 中定义的设计准则。在 iOS 上,Apple 的 人机界面指南 (HIG) 中定义了一个称为“警报”的等效组件。

Basic Dialog in Material 3
M3 中的基本对话框
Alert in Human Interface Guidelines
HIG 中的警报

由于警报对话框通常与操作系统紧密集成,因此它们的设计通常需要遵循平台约定。当对话框用于请求用户输入有关安全、隐私和破坏性操作(例如永久删除文件)的信息时,这一点尤其重要。作为例外,可以在非关键用户流程中使用品牌警报对话框设计来突出显示特定信息或消息。

要实现特定于平台的警报对话框,您可以在 Android 上使用 Flutter 的 AlertDialog 窗口小部件,在 iOS 上使用 CupertinoAlertDialog 窗口小部件。以下是您可以改编以显示特定于平台的警报对话框的代码片段。

void _showAdaptiveDialog(
  context, {
  required Text title,
  required Text content,
  required List<Widget> actions,
}) {
  Platform.isIOS || Platform.isMacOS
      ? showCupertinoDialog<String>(
          context: context,
          builder: (BuildContext context) => CupertinoAlertDialog(
            title: title,
            content: content,
            actions: actions,
          ),
        )
      : showDialog(
          context: context,
          builder: (BuildContext context) => AlertDialog(
            title: title,
            content: content,
            actions: actions,
          ),
        );
}

要了解有关改编警报对话框的更多信息,请查看 关于对话框改编的 GitHub 讨论。您可以在讨论中留下反馈或提出问题。