devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc: update docs/flutter.md #830

Browse Source
This commit is contained in:
jaywcjlove 2024-09-24 15:00:38 +08:00
parent feba5e1704
commit ade6fbe3d0
1 changed files with 41 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
docs/flutter.md
View File

@ -41,6 +41,7 @@ $ sudo softwareupdate --install-rosetta --agree-to-license
<!--rehype:className=style-timeline--> <!--rehype:className=style-timeline-->
### Windows 操作系统上安装和配置 ### Windows 操作系统上安装和配置
<!--rehype:wrap-class=col-span-2-->
> 完整教程请参阅 Flutter 中文社区的 [安装和环境配置](https://docs.flutter.cn/get-started/install) > 完整教程请参阅 Flutter 中文社区的 [安装和环境配置](https://docs.flutter.cn/get-started/install)
@ -783,7 +784,8 @@ ListView.separated(
``` ```
### GridView ### GridView
<!--rehype:wrap-class=col-span-2--> <!--rehype:wrap-class=col-span-2 row-span-2-->
`GridView`可将元素显示为二维网格状的列表组件，并支持主轴方向滚动。 `GridView`可将元素显示为二维网格状的列表组件，并支持主轴方向滚动。
使用GridView() 构造函数，需要传入gridDelegate和children。Flutter中已经提供了两种实现方式，分别是: 使用GridView() 构造函数，需要传入gridDelegate和children。Flutter中已经提供了两种实现方式，分别是:
@ -892,14 +894,17 @@ PageView.builder(
), ),
), ),
``` ```
## flutter动画组件
Flutter 动画组件
---
### 1.隐式动画 ### 1.隐式动画
> 在动画组件内，直接配置curve和duration属性 在动画组件内，直接配置curve和duration属性
#### AnimatedContainer #### AnimatedContainer
> 使用AnimatedContainer组件，配置curve曲线过渡和duration过渡时间
使用AnimatedContainer组件，配置curve曲线过渡和duration过渡时间
```dart ```dart
class HomeState extends StatefulWidget{ class HomeState extends StatefulWidget{
@ -942,7 +947,8 @@ class _HomeState extends State<HomeState>{
``` ```
#### AnimatedPadding #### AnimatedPadding
> 通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置
通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置
```dart ```dart
class _HomeState extends State<HomeState>{ class _HomeState extends State<HomeState>{
@ -979,7 +985,8 @@ class _HomeState extends State<HomeState>{
``` ```
#### AnimatedAlign #### AnimatedAlign
> 通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置
通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置
```dart ```dart
class _HomeState extends State<HomeState>{ class _HomeState extends State<HomeState>{
@ -1017,7 +1024,7 @@ class _HomeState extends State<HomeState>{
#### AnimatedOpacity #### AnimatedOpacity
>通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置 通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置
```dart ```dart
class _HomeState extends State<HomeState>{ class _HomeState extends State<HomeState>{
@ -1052,9 +1059,10 @@ class _HomeState extends State<HomeState>{
} }
} }
``` ```
#### AnimatedPositioned #### AnimatedPositioned
> 通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置 通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置
```dart ```dart
class _HomeState extends State<HomeState>{ class _HomeState extends State<HomeState>{
@ -1094,12 +1102,13 @@ class _HomeState extends State<HomeState>{
``` ```
### 2.显示动画 ### 2.显示动画
<!--rehype:wrap-class=col-span-2-->
> 使用显示动画,定义AnimationController,在组件上with SingleTickerProviderStateMixin 使用显示动画时，定义 `AnimationController`，并在组件中使用 `SingleTickerProviderStateMixin`。
#### RotationTransition #### RotationTransition
>RotationTransition实现旋转动画,turns为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,使用..联级操作调用repeat函数让动画重复运动 `RotationTransition` 实现旋转动画，`turns` 为 `AnimationController`。在 `initState` 中设置 `vsync` 和 `duration`，使用 `..repeat()` 实现动画循环。
```dart ```dart
class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
@ -1111,7 +1120,7 @@ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
_controller = AnimationController( _controller = AnimationController(
vsync: this, vsync: this,
duration: const Duration(seconds: 1) duration: const Duration(seconds: 1)
)..repeat(); //让程序和手机的刷新频率统一 )..repeat(); // 让程序和手机的刷新频率统一
} }
@override @override
@ -1129,18 +1138,6 @@ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
#### AnimationController #### AnimationController
> controller的播放方式
>
> repeat 重复
>
> forward 播放一次
>
> reverse 倒序播放
>
> stop 停止
>
> reset 重置
```dart ```dart
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin { class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
@ -1149,15 +1146,15 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_controller = // 让程序和手机的刷新频率统一
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一 _controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
home: Scaffold( home: Scaffold(
floatingActionButton:FloatingActionButton(onPressed: (){ floatingActionButton:FloatingActionButton(onPressed: () {
_controller.repeat(); //重复播放 _controller.repeat(); //重复播放
},child:const Icon(Icons.add),) , },child:const Icon(Icons.add),) ,
appBar: AppBar( appBar: AppBar(
@ -1165,21 +1162,22 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
), ),
body: Center( body: Center(
child: Column( child: Column(
children: [RotationTransition( children: [
turns: _controller, RotationTransition(
child: const FlutterLogo(size: 60), turns: _controller,
), child: const FlutterLogo(size: 60),
ElevatedButton(onPressed: (){ ),
_controller.forward(); //播放一次
}, child:const Icon(Icons.refresh)),
ElevatedButton(onPressed: (){ ElevatedButton(onPressed: (){
_controller.reverse(); //倒序播放 _controller.forward(); // 👈 播放一次
}, child:const Icon(Icons.refresh)), }, child:const Icon(Icons.refresh)),
ElevatedButton(onPressed: (){ ElevatedButton(onPressed: (){
_controller.stop(); //停止 _controller.reverse(); // 👈 倒序播放
}, child:const Icon(Icons.refresh)), }, child:const Icon(Icons.refresh)),
ElevatedButton(onPressed: (){ ElevatedButton(onPressed: (){
_controller.reset(); //重置 _controller.stop(); // 👈 停止
}, child:const Icon(Icons.refresh)),
ElevatedButton(onPressed: (){
_controller.reset(); // 👈 重置
}, child:const Icon(Icons.refresh)), }, child:const Icon(Icons.refresh)),
] ]
) )
@ -1192,7 +1190,7 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
#### FadeTransition #### FadeTransition
>RotationTransition实现透明度变化动画,opacity为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此opacity会发生从透明到实体的过程,如果要实现实体逐渐到透明可以使用reverse()倒序播放 `FadeTransition` 实现透明度变化，`opacity` 为 `AnimationController`。可以通过 `reverse()` 实现从实体逐渐变透明。
```dart ```dart
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin { class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
@ -1202,8 +1200,8 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_controller = //让程序和手机的刷新频率统一
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一 _controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
} }
@override @override
@ -1227,22 +1225,20 @@ class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
} }
``` ```
> 也可以通过lowerBound和upperBound来配置controller的最低和最高值 也可以通过 lowerBound 和 upperBound 来配置 controller 的最低和最高值
#### ScaleTransition #### ScaleTransition
> ScaleTransition实现放大缩小动画,scale为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此scale会发生从小到大的过程,如果要实现大逐渐到小可以使用reverse()倒序播放 `ScaleTransition` 实现缩放动画，`scale` 为 `AnimationController`，可以通过 `reverse()` 实现从大到小的动画效果。
```dart ```dart
class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin { class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
late AnimationController _controller; late AnimationController _controller;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_controller = // 让程序和手机的刷新频率统一
AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一 _controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
} }
@override @override