doc: update docs/flutter.md #830
This commit is contained in:
jaywcjlove
@@ -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)
|
||||
|
||||
@@ -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中已经提供了两种实现方式，分别是:
|
||||
|
||||
@@ -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{
|
||||
@@ -942,7 +947,8 @@ class _HomeState extends State<HomeState>{
|
||||
```
|
||||
|
||||
#### AnimatedPadding
|
||||
> 通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置
|
||||
|
||||
通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置
|
||||
|
||||
```dart
|
||||
class _HomeState extends State<HomeState>{
|
||||
@@ -979,7 +985,8 @@ class _HomeState extends State<HomeState>{
|
||||
```
|
||||
|
||||
#### AnimatedAlign
|
||||
> 通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置
|
||||
|
||||
通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置
|
||||
|
||||
```dart
|
||||
class _HomeState extends State<HomeState>{
|
||||
@@ -1017,7 +1024,7 @@ class _HomeState extends State<HomeState>{
|
||||
|
||||
#### AnimatedOpacity
|
||||
|
||||
>通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置
|
||||
通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置
|
||||
|
||||
```dart
|
||||
class _HomeState extends State<HomeState>{
|
||||
@@ -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>{
|
||||
@@ -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{
|
||||
@@ -1111,7 +1120,7 @@ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
|
||||
_controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(seconds: 1)
|
||||
)..repeat(); //让程序和手机的刷新频率统一
|
||||
)..repeat(); // 让程序和手机的刷新频率统一
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -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 {
|
||||
|
||||
@@ -1149,15 +1146,15 @@ 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(
|
||||
@@ -1165,21 +1162,22 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
|
||||
),
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: [RotationTransition(
|
||||
children: [
|
||||
RotationTransition(
|
||||
turns: _controller,
|
||||
child: const FlutterLogo(size: 60),
|
||||
),
|
||||
ElevatedButton(onPressed: (){
|
||||
_controller.forward(); //播放一次
|
||||
_controller.forward(); // 👈 播放一次
|
||||
}, child:const Icon(Icons.refresh)),
|
||||
ElevatedButton(onPressed: (){
|
||||
_controller.reverse(); //倒序播放
|
||||
_controller.reverse(); // 👈 倒序播放
|
||||
}, child:const Icon(Icons.refresh)),
|
||||
ElevatedButton(onPressed: (){
|
||||
_controller.stop(); //停止
|
||||
_controller.stop(); // 👈 停止
|
||||
}, child:const Icon(Icons.refresh)),
|
||||
ElevatedButton(onPressed: (){
|
||||
_controller.reset(); //重置
|
||||
_controller.reset(); // 👈 重置
|
||||
}, child:const Icon(Icons.refresh)),
|
||||
]
|
||||
)
|
||||
@@ -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 {
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user