Skip to content

Commit

Permalink
doc: update docs/flutter.md jaywcjlove#830
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Sep 24, 2024
1 parent feba5e1 commit ade6fbe
Showing 1 changed file with 41 additions and 45 deletions.
86 changes: 41 additions & 45 deletions docs/flutter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ $ sudo softwareupdate --install-rosetta --agree-to-license
<!--rehype:className=style-timeline-->

### Windows 操作系统上安装和配置
<!--rehype:wrap-class=col-span-2-->

> 完整教程请参阅 Flutter 中文社区的 [安装和环境配置](https://docs.flutter.cn/get-started/install)

Expand Down Expand Up @@ -783,7 +784,8 @@ ListView.separated(
```

### GridView
<!--rehype:wrap-class=col-span-2-->
<!--rehype:wrap-class=col-span-2 row-span-2-->

`GridView`可将元素显示为二维网格状的列表组件，并支持主轴方向滚动。
使用GridView() 构造函数，需要传入gridDelegate和children。Flutter中已经提供了两种实现方式，分别是:

Expand Down Expand Up @@ -892,14 +894,17 @@ PageView.builder(
),
),
```
## flutter动画组件

Flutter 动画组件
---

### 1.隐式动画

> 在动画组件内，直接配置curve和duration属性
在动画组件内，直接配置curve和duration属性

#### AnimatedContainer
> 使用AnimatedContainer组件，配置curve曲线过渡和duration过渡时间

使用AnimatedContainer组件，配置curve曲线过渡和duration过渡时间

```dart
class HomeState extends StatefulWidget{
Expand Down Expand Up @@ -942,7 +947,8 @@ class _HomeState extends State<HomeState>{
```

#### AnimatedPadding
> 通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置

通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置

```dart
class _HomeState extends State<HomeState>{
Expand Down Expand Up @@ -979,7 +985,8 @@ class _HomeState extends State<HomeState>{
```

#### AnimatedAlign
> 通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置

通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置

```dart
class _HomeState extends State<HomeState>{
Expand Down Expand Up @@ -1017,7 +1024,7 @@ class _HomeState extends State<HomeState>{

#### AnimatedOpacity

>通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置
通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置

```dart
class _HomeState extends State<HomeState>{
Expand Down Expand Up @@ -1052,9 +1059,10 @@ class _HomeState extends State<HomeState>{
}
}
```

#### AnimatedPositioned

> 通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置
通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置

```dart
class _HomeState extends State<HomeState>{
Expand Down Expand Up @@ -1094,12 +1102,13 @@ class _HomeState extends State<HomeState>{
```

### 2.显示动画
<!--rehype:wrap-class=col-span-2-->

> 使用显示动画,定义AnimationController,在组件上with SingleTickerProviderStateMixin
使用显示动画时，定义 `AnimationController`，并在组件中使用 `SingleTickerProviderStateMixin`。

#### RotationTransition

>RotationTransition实现旋转动画,turns为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,使用..联级操作调用repeat函数让动画重复运动
`RotationTransition` 实现旋转动画，`turns` 为 `AnimationController`。在 `initState` 中设置 `vsync` 和 `duration`，使用 `..repeat()` 实现动画循环。

```dart
class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
Expand All @@ -1111,7 +1120,7 @@ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1)
)..repeat(); //让程序和手机的刷新频率统一
)..repeat(); // 让程序和手机的刷新频率统一
}
@override
Expand All @@ -1129,18 +1138,6 @@ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{

#### AnimationController

> controller的播放方式
>
> repeat 重复
>
> forward 播放一次
>
> reverse 倒序播放
>
> stop 停止
>
> reset 重置
```dart
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
Expand All @@ -1149,37 +1146,38 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一
// 让程序和手机的刷新频率统一
_controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton:FloatingActionButton(onPressed: (){
floatingActionButton:FloatingActionButton(onPressed: () {
_controller.repeat(); //重复播放
},child:const Icon(Icons.add),) ,
appBar: AppBar(
title: const Text("测试"),
),
body: Center(
child: Column(
children: [RotationTransition(
turns: _controller,
child: const FlutterLogo(size: 60),
),
ElevatedButton(onPressed: (){
_controller.forward(); //播放一次
}, child:const Icon(Icons.refresh)),
children: [
RotationTransition(
turns: _controller,
child: const FlutterLogo(size: 60),
),
ElevatedButton(onPressed: (){
_controller.reverse(); //倒序播放
_controller.forward(); // 👈 播放一次
}, child:const Icon(Icons.refresh)),
ElevatedButton(onPressed: (){
_controller.stop(); //停止
_controller.reverse(); // 👈 倒序播放
}, child:const Icon(Icons.refresh)),
ElevatedButton(onPressed: (){
_controller.reset(); //重置
_controller.stop(); // 👈 停止
}, child:const Icon(Icons.refresh)),
ElevatedButton(onPressed: (){
_controller.reset(); // 👈 重置
}, child:const Icon(Icons.refresh)),
]
)
Expand All @@ -1192,7 +1190,7 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {

#### FadeTransition

>RotationTransition实现透明度变化动画,opacity为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此opacity会发生从透明到实体的过程,如果要实现实体逐渐到透明可以使用reverse()倒序播放
`FadeTransition` 实现透明度变化，`opacity` 为 `AnimationController`。可以通过 `reverse()` 实现从实体逐渐变透明。

```dart
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
Expand All @@ -1202,8 +1200,8 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一
//让程序和手机的刷新频率统一
_controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
}
@override
Expand All @@ -1227,22 +1225,20 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
}
```

> 也可以通过lowerBound和upperBound来配置controller的最低和最高值
也可以通过 lowerBound 和 upperBound 来配置 controller 的最低和最高值

#### ScaleTransition

> ScaleTransition实现放大缩小动画,scale为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此scale会发生从小到大的过程,如果要实现大逐渐到小可以使用reverse()倒序播放
`ScaleTransition` 实现缩放动画，`scale` 为 `AnimationController`，可以通过 `reverse()` 实现从大到小的动画效果。

```dart
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一
// 让程序和手机的刷新频率统一
_controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
}
@override
Expand Down

0 comments on commit ade6fbe

Please sign in to comment.