使用Opacity
實現淡入淡出效果,通過isVisible
變量,設值更改不透明度,控制widgets的可見性。
AnimatedOpacity(
opacity: _isVisible ? 1.0 : 0.0, // 根據可見性設置不透明度。1.0為不透明,0.0為透明
duration: Duration(milliseconds: 500), // 動畫持續時間
child: Widget(), //寫入要實現動畫效果的widgets
),
完整範例:實現文字淡入淡出效果
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TextAnimation(),
);
}
}
class TextAnimation extends StatefulWidget {
@override
TextAnimationState createState() => TextAnimationState();
}
class TextAnimationState extends State<TextAnimation> {
bool _isVisible = true; // 聲明一個變數來控制文字的可見性
// 切換文字的可見性
void toggleVisibility() {
setState(() {
_isVisible = !_isVisible;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('淡入淡出動畫'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: _isVisible ? 1.0 : 0.0, // 根據可見性設置不透明度
duration: Duration(milliseconds: 500), // 動畫持續時間
child: Text(
'你好', // 要顯示的文字
style: TextStyle(fontSize: 24.0),
),
),
SizedBox(height: 20.0),
ElevatedButton(
onPressed: toggleVisibility, // 當按鈕被按下時切換可見性
child: Text(_isVisible ? '隱藏詞彙' : '顯示詞彙'), // 根據可見性顯示不同的按鈕文本
),
],
),
),
);
}
}
成果展現
https://imgur.com/a/vR6rccl