在 Flutter 中，AnimatedPositionedDirectional 元件應用在 Stack 中，當位置或者是大小改變時，呈動畫效果
const AnimatedPositionedDirectional({
Key? key,
required this.child,
this.start,
this.top,
this.end,
this.bottom,
this.width,
this.height,
Curve curve = Curves.linear,
required Duration duration,
VoidCallback? onEnd,
})
複製程式碼- start 如果當前的環境是 TextDirection.ltr 文字方向從左向右，則是左對齊，反之是右對齊
- end 如果當前的環境是 TextDirection.ltr 文字方向從左向右，則是右對齊，反之是左對齊
- width 限制子元件的寬度
- heght 限制子元件的高度
- curve 動畫曲線 速率
- duration 動畫執行時間
- onEnd 動畫執行完成回撥方法
使用 Demo
Directionality(
// TextDirection.ltr left to right 從左到右
// TextDirection.rtl rtl right to left
textDirection: TextDirection.ltr,
child: Stack(
children: [
AnimatedPositionedDirectional(
top: 100,
start: 100,
width: 100,
height: 200,
duration: Duration(seconds: 2),
//執行結束回撥
onEnd: () {},
//動畫曲線
curve: Curves.fastOutSlowIn,
child: Container(
color: Colors.blue,
child: Text("早起的年輕人"),
),
),
],
),
)
複製程式碼
如果你有興趣 你可以關注一下公眾號 biglead 來獲取最新的學習資料。