Skip to content

Commit

Permalink
[内容修订] src/platform-integration/platform-adaptations (#1386)
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexV525 authored Nov 27, 2023
1 parent 9adc009 commit a89b413
Showing 1 changed file with 83 additions and 5 deletions.
88 changes: 83 additions & 5 deletions src/platform-integration/platform-adaptations.md
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,8 @@ of the current Material theme).
On **iOS**, scrolling past the edge of a scrollable
[overscrolls][] with increasing resistance and snaps back.

**iOS** 平台,滚动达到边界的时候,会显示一个 [滚动边界][overscrolls] 的弹簧效果。
**iOS** 平台,滚动达到边界的时候,会显示一个
[滚动边界][overscrolls] 的弹簧效果。

<div class="container">
<div class="row">
Expand Down Expand Up @@ -372,7 +373,8 @@ tapping the OS status bar scrolls the primary
scroll controller to the top position.
There is no equivalent behavior on **Android**.

**iOS** 平台,点击操作系统的状态栏,主要的滚动条控制器会滚动到顶部。 **Android** 没有对应的行为。
**iOS** 平台,点击操作系统的状态栏,主要的滚动条控制器会滚动到顶部。
**Android** 没有对应的行为(部分国产系统自己实现了该特性)。

<div class="container">
<div class="row">
Expand Down Expand Up @@ -487,6 +489,8 @@ has a stem/shaft on Android.

The material library also provides a set of platform-adaptive icons through [`Icons.adaptive`].

Material 也通过 [`Icons.adaptive`][] 提供了一系列根据平台自适应的图标。

## Haptic feedback

## 触摸反馈
Expand Down Expand Up @@ -567,13 +571,15 @@ With **Material on Android**,
the Android style selection toolbar is shown when
a text selection is made in a text field.

**Android** 平台上使用 **Material**,在文本输入框里面选中文本会显示一个 Android 风格的文本选中工具栏。
**Android** 平台上使用 **Material**
在文本输入框里面选中文本会显示一个 Android 风格的文本选中工具栏。

With **Material on iOS** or when using **Cupertino**,
the iOS style selection toolbar is shown when a text
selection is made in a text field.

**iOS** 平台上使用 **Material** 或者在两个平台上都使用 **Cupertino**,在文本输入框里面选中文本会展示一个 iOS 风格的文本选中工具栏。
**iOS** 平台上使用 **Material** 或者在两个平台上都使用 **Cupertino**
在文本输入框里面选中文本会展示一个 iOS 风格的文本选中工具栏。

<div class="container">
<div class="row">
Expand Down Expand Up @@ -615,7 +621,8 @@ With **Material on iOS** or when using **Cupertino**,
a single tap in a text field puts the cursor at the
nearest edge of the word tapped.

**iOS** 平台使用 **Material** 或者在两个平台都使用 **Cupertino**,在文本空间中点击,会把光标移动到点击处最近的单词末尾。
**iOS** 平台使用 **Material** 或者在两个平台都使用 **Cupertino**
在文本空间中点击,会把光标移动到点击处最近的单词末尾。

Collapsed text selections don't have draggable handles on iOS.

Expand Down Expand Up @@ -749,23 +756,38 @@ Android 和 iOS 平台上,

## UI components

## UI 组件

This section includes preliminary recommendations on how to adapt
Material widgets to deliver a natural and compelling experience on iOS.
Your feedback is welcomed on [issue #8427][].

本节包含有关如何调整 Material widget 以在
iOS 上提供自然且亮眼的体验的初步提议。
欢迎你对问题 [issue #8427][] 提出反馈。

### Widgets with .adaptive() constructors

### 带有 .adaptive() 构造的 widget

Several widgets support `.adaptive()` constructors.
The following table lists these widgets.
Adaptive constructors substitute the corresponding Cupertino components
when the app is run on an iOS device.

部分 widget 带有 `.adaptive()` 构造。
下方的表列出了这些 widget。
当应用程序在 iOS 设备上运行时,它们会自动以 Cupertino 的组件构造。

Widgets in the following table are used primarily for input,
selection, and to display system information.
Because these controls are tightly integrated with the operating system,
users have been trained to recognize and respond to them.
Therefore, we recommend that you follow platform conventions.

这些 widget 主要用于输入、选择和显示系统信息。
由于它们与系统高度相关,用户可能已经习惯于与它们产生对应的记忆和反应。
因此我们建议你在应用程序中采用各自平台的转化内容。

| Material Widget | Cupertino Widget | Adaptive Constructor |
|---|---|---|---|---|
Expand All @@ -777,11 +799,16 @@ Therefore, we recommend that you follow platform conventions.

### Top app bar and navigation bar

### 顶部应用栏和导航栏

Since Android 12, the default UI for top app
bars follows the design guidelines defined in [Material 3][mat-appbar].
On iOS, an equivalent component called "Navigation Bars"
is defined in [Apple's Human Interface Guidelines][hig-appbar] (HIG).

自 Android 12 起,顶部应用栏的界面遵循 [Material 3][mat-appbar] 中定义的设计指南。
在 iOS 上,[Apple 的人机界面指南][hig-appbar] (HIG) 中定义了一个名为「导航栏」的等效组件。

<div class="container">
<div class="row">
<div class="col-sm text-center">
Expand Down Expand Up @@ -812,6 +839,10 @@ the Material `AppBar` and `SliverAppBar` widgets.
You can also further customize the properties of these widgets to better
match iOS platform styles, as shown below.

Flutter 应用程序中应用栏的某些属性,例如系统图标和页面转场,都应该进行调整。
使用 Material `AppBar``SliverAppBar` widget 时,这些属性都已经自动调整。
你还可以进一步自定义它们的属性,以更好地匹配 iOS 的平台风格,如下所示。

```dart
// Map the text theme to iOS styles
TextTheme cupertinoTextTheme = TextTheme(
Expand Down Expand Up @@ -847,13 +878,21 @@ so long as its cohesive with the rest of your application. You can see
additional code samples and a further explanation in
[the GitHub discussion on app bar adaptations][appbar-post].

但是,由于顶栏是与页面中的其他内容一起显示的,
因此我们只建议调整样式,它只要能与应用程序的其余部分保持一致即可。
你可以在 [有关应用栏适配的 GitHub 讨论中][appbar-post]
查看其他代码示例和进一步说明。

### Bottom navigation bars

Since Android 12, the default UI for bottom navigation
bars follow the design guidelines defined in [Material 3][mat-navbar].
On iOS, an equivalent component called "Tab Bars"
is defined in [Apple's Human Interface Guidelines][hig-tabbar] (HIG).

自 Android 12 起,底部导航栏的界面遵循 [Material 3][mat-navbar] 中定义的设计指南。
在 iOS 上,[Apple 的人机界面指南][hig-tabbar] (HIG) 中定义了一个名为「标签页栏」的等效组件。

<div class="container">
<div class="row">
<div class="col-sm text-center">
Expand Down Expand Up @@ -882,12 +921,21 @@ own branding. However, if you choose to use Material's default
styling on Android, you might consider adapting to the default iOS
tab bars.

由于标签栏在你的应用程序中是持续存在的,因此它们应该与你自己的品牌匹配。
如果你选择在 Android 上使用 Material 的默认样式,
你应该要在考虑在 iOS 平台上使用 iOS 的标签页栏。

To implement platform-specific bottom navigation bars,
you can use Flutter's `NavigationBar` widget on Android
and the `CupertinoTabBar` widget on iOS.
Below is a code snippet you can
adapt to show a platform-specific navigation bars.

如果你要实现特定于平台的底部导航栏,
可以在 Android 上使用 Flutter 的 `NavigationBar` 小部件,
在 iOS 上使用 `CupertinoTabBar` 小部件。
下面是用于显示特定于平台的导航栏的代码片段。

```dart
final Map<String, Icon> _navigationItems = {
'Menu': Platform.isIOS ? Icon(CupertinoIcons.house_fill) : Icon(Icons.home),
Expand Down Expand Up @@ -929,11 +977,16 @@ Scaffold(
```
### Text fields

### 文本输入

Since Android 12, text fields follow the
[Material 3][m3-text-field] (M3) design guidelines.
On iOS, Apple's [Human Interface Guidelines][hig-text-field] (HIG) define
an equivalent component.

自 Android 12 起,文本输入组件的界面遵循 [Material 3][m3-text-field] 中定义的设计指南。
在 iOS 上,[Apple 的人机界面指南][hig-text-field] (HIG) 中定义了一个名为「文本栏」的等效组件。

<div class="container">
<div class="row">
<div class="col-sm text-center">
Expand All @@ -960,10 +1013,14 @@ an equivalent component.
Since text fields require user input,
their design should follow platform conventions.

由于用户需要用文本栏来输入,因此它们应该遵循平台习惯来展示。

To implement a platform-specific `TextField`
in Flutter, you can adapt the styling of the
Material `TextField`.

你可以调整 Material 材质的 `TextField` 的样式来实现对应平台的 `TextField`

```dart
Widget _createAdaptiveTextField() {
final _border = OutlineInputBorder(
Expand Down Expand Up @@ -995,14 +1052,23 @@ To learn more about adapting text fields, check out
[the GitHub discussion on text fields][text-field-post].
You can leave feedback or ask questions in the discussion.

若你想要了解有关调整文本字段的更多信息,
请查看 [有关文本字段的 GitHub 讨论][text-field-post]
你可以在讨论中留下反馈或提出问题。

### Alert dialog

### 提醒对话框

Since Android 12, the default UI of alert dialogs
(also known as a "basic dialog") follows the design guidelines
defined in [Material 3][m3-dialog] (M3).
On iOS, an equivalent component called "alert" is defined in Apple's
[Human Interface Guidelines][hig-alert] (HIG).

自 Android 12 起,提醒对话框的界面遵循 [Material 3][m3-dialog] 中定义的设计指南。
在 iOS 上,[Apple 的人机界面指南][hig-alert] (HIG) 中定义了一个名为「提醒」的等效组件。

<div class="container">
<div class="row">
<div class="col-sm text-center">
Expand Down Expand Up @@ -1033,11 +1099,20 @@ about security, privacy, and destructive operations (e.g., deleting files
permanently). As an exception, a branded alert dialog design can be used on
non-critical user flows to highlight specific information or messages.

由于提醒与系统高度相关,通常应当遵循平台习惯来实现它们。
对话框的实现对于使用对话框请求用户输入安全、隐私或破坏性操作(例如永久删除文件)而言至关重要。
而与品牌相关的提醒对话框可以以不打断用户流程的方式,高亮特定的内容。

To implement platform-specific alert dialogs,
you can use Flutter's `AlertDialog` widget on Android
and the `CupertinoAlertDialog` widget on iOS. Below is a code snippet you can
adapt to show a platform-specific alert dialog.

如果你要实现特定于平台的提示对话框,
可以在 Android 上使用 Flutter 的 `AlertDialog` 小部件,
在 iOS 上使用 `CupertinoAlertDialog` 小部件。
下面是用于显示特定于平台的提醒对话框的代码片段。

```dart
void _showAdaptiveDialog(
context, {
Expand Down Expand Up @@ -1069,6 +1144,9 @@ To learn more about adapting alert dialogs, check out
[the GitHub discussion on dialog adaptations][alert-post].
You can leave feedback or ask questions in the discussion.

若你想要了解有关提醒对话框适配问题的更多信息,
请查看 [有关对话框适配的 GitHub 讨论][alert-post]
你可以在讨论中留下反馈或提出问题。

[issue #8410]: {{site.repo.flutter}}/issues/8410#issuecomment-468034023
[android.app.AlertDialog]: {{site.android-dev}}/reference/android/app/AlertDialog.html
Expand Down

0 comments on commit a89b413

Please sign in to comment.