Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[sync] 2019/8/9 #422

Merged
merged 9 commits into from
Aug 10, 2019
14 changes: 7 additions & 7 deletions src/docs/codelabs/layout-basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,36 +124,36 @@ property to control how the `Row` aligns its children within that space.

There are six different values available in the `MainAxisAlignment` enum:

`MainAxisAlignment` 有六种不同的枚举值
`MainAxisAlignment` 有六种不同的枚举值

* `MainAxisAligment.start`<br>
* `MainAxisAlignment.start`<br>
Place all children as close to the start of the `Row` as possible
(for left-to-right rows, this is the left side).

将所有的 children 尽可能向 `Row` 的 start 方向排列(如果是从左到右,那就是靠左排列)。

* `MainAxisAligment.end`<br>
* `MainAxisAlignment.end`<br>
Place all children as close to the end of the `Row` as possible.

将所有的 children 尽可能向 `Row` 的 end 方向排列。

* `MainAxisAligment.center`<br>
* `MainAxisAlignment.center`<br>
Group the children together in the center of the `Row`.

将 children 聚在 `Row` 主轴的中间位置。

* `MainAxisAligment.spaceBetween`<br>
* `MainAxisAlignment.spaceBetween`<br>
Any extra space is divided evenly and used to make gaps between the children.

将主轴空白位置进行均分,用来在 children 之间制造间隔,首尾 children 距边缘没有间隙。

* `MainAxisAligment.spaceEvenly`<br>
* `MainAxisAlignment.spaceEvenly`<br>
Just like `spaceBetween`, except the spots before the first child
and after the last one also count as gaps.

很像 `spaceBetween`,除了让首尾 children 距边缘也有相同的间隙。

* `MainAxisAligment.spaceAround`<br>
* `MainAxisAlignment.spaceAround`<br>
Just like `spaceEvenly`, only the first and last gaps get 50% of the
amount used between children.

Expand Down
2 changes: 1 addition & 1 deletion src/docs/cookbook/animation/animated-container.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Animate the properties of a container
title: Container 里的动画渐变效果
prev:
title: Animate a page route transition
path: /docs/cookbook/animation/page-route-animation
path: /docs/cookbook/animation/physics-simulation
next:
title: Fade a Widget in and out
title: Widget 的淡入淡出效果
Expand Down
28 changes: 13 additions & 15 deletions src/docs/cookbook/animation/page-route-animation.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@
title: Animate a page route transition
title: 为页面切换加入动画效果
next:
title: Animate the properties of a container
title: Container 里的动画渐变效果
path: /docs/cookbook/animation/animated-container
title: Animate a widget using a physics simulation
title: 在物理模拟器上构建动画
path: /docs/cookbook/animation/physics-simulation
---

# Animate a page route transition

A design language, such as Material, defines standard behaviors when
transitioning between routes (or screens). Sometimes, though, a custom
transition between screens can make an app more unique. To help,
Expand All @@ -29,7 +27,7 @@ To create a custom page route transition, this recipe uses the following steps:
4. Use a `CurveTween`
5. Combine the two `Tween`s

# 1. Set up a PageRouteBuilder
## 1. Set up a PageRouteBuilder

To start, use a
[PageRouteBuilder]({{site.api}}/flutter/widgets/PageRouteBuilder-class.html)
Expand All @@ -38,10 +36,10 @@ to create a [Route]({{site.api}}/flutter/widgets/Route-class.html).
(`pageBuilder`), and one to build the route's transition (`transitionsBuilder`).

{{site.alert.note}}
The `child` parameter in transitionsBuilder is the widget returned from
pageBuilder. The `pageBuilder` function is only called the first time the route
is built. The framework can avoid extra work because `child` stays the same
throughout the transition.
The `child` parameter in transitionsBuilder is the widget returned from
pageBuilder. The `pageBuilder` function is only called the first time the
route is built. The framework can avoid extra work because `child` stays the
same throughout the transition.
{{site.alert.end}}

The following example creates two routes: a home route with a "Go!" button, and
Expand Down Expand Up @@ -93,7 +91,7 @@ class Page2 extends StatelessWidget {
}
```

# 2. Create a Tween
## 2. Create a Tween

To make the new page animate in from the bottom, it should animate from
`Offset(0,1)` to `Offset(0, 0)` (usually defined using the `Offset.zero`
Expand All @@ -116,7 +114,7 @@ transitionsBuilder: (context, animation, secondaryAnimation, child) {
},
```

# 3. Use an AnimatedWidget
## 3. Use an AnimatedWidget

Flutter has a set of widgets extending
[AnimatedWidget]({{site.api}}/flutter/widgets/AnimatedWidget-class.html)
Expand All @@ -142,7 +140,7 @@ transitionsBuilder: (context, animation, secondaryAnimation, child) {
},
```

# 4. Use a CurveTween
## 4. Use a CurveTween

Flutter provides a selection of easing curves that adjust the rate of the
animation over time. The
Expand All @@ -162,7 +160,7 @@ var curveTween = CurveTween(curve: curve);
This new Tween still produces values from 0 to 1. In the next step, it will be
combined the `Tween<Offset>` from step 2.

# 5. Combine the two Tweens
## 5. Combine the two Tweens

To combine the tweens, use
[chain()]({{site.api}}/flutter/animation/Animatable/chain.html):
Expand Down Expand Up @@ -217,7 +215,7 @@ transitionsBuilder: (context, animation, secondaryAnimation, child) {
}
```

# Complete Example
## Complete Example

```dart
import 'package:flutter/material.dart';
Expand Down
Loading