Flutter的AnimatedDefaultTextStyle實作文本樣式的動畫過渡切換效果

題記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

重要消息

• 網易雲【玩轉大前端】配套課程
• EDU配套 教程
• Flutter開發的點滴積累系列文章

AnimatedDefaultTextStyle通過動畫過渡的方式來切換文本的顯示樣式，如下圖所示效果，當點選切換樣式按鈕時，顯示的文本樣式會以動畫過渡的方式來切換。

這個效果的核心代碼就是通過AnimatedDefaultTextStyle來實作的動畫效果過渡，代碼如下：

AnimatedDefaultTextStyle buildAnimatedDefaultTextStyle() {
  return AnimatedDefaultTextStyle(
    ///設定Text中的文本樣式
    ///每當樣式有改變時會以動畫的方式過渡切換
    style: isSelected
        ? TextStyle(
            fontSize: 50, color: Colors.red, fontWeight: FontWeight.bold)
        : TextStyle(
            fontSize: 24.0, color: Colors.black, fontWeight: FontWeight.w100),
    ///動畫切換的時間
    duration: const Duration(milliseconds: 200),
    ///動畫執行插值器
    curve: Curves.bounceInOut,
    ///文本對齊方式
    textAlign: TextAlign.start,
    ///文本是否應該在軟換行符處換行
    softWrap: true,
    ///超過文本行數區域的裁剪方式
    ///設定設定為省略号
    overflow: TextOverflow.ellipsis,
    ///最大顯示行數
    maxLines: 1,
    ///每當樣式有修改觸發動畫時
    ///動畫執行結束的回調
    onEnd: () {
      print("動畫執行結束");
    },

    ///文本元件
    child: Text("Hello, Flutter"),
  );
}
           

通過一個按鈕來動态修改isSelected的值，進而來觸發修改文本樣式的切換動畫過渡效果，完整代碼如下：

class AnimatedTextStylePage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<AnimatedTextStylePage> {
  @override
  Widget build(BuildContext context) {
    return buildBodyFunction();
  }

  bool isSelected = false;

  ///5.8 /lib/code4/main_data404.dart
  /// 文本顯示元件Text
  Widget buildBodyFunction() {
    return Scaffold(
      appBar: AppBar(
        title: Text("動畫樣式"),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          children: <Widget>[
            ///動畫樣式元件
            buildAnimatedDefaultTextStyle(),
            SizedBox(
              height: 55,
            ),
            FlatButton(
              child: Text("切換樣式"),
              onPressed: () {
                setState(() {
                  isSelected = !isSelected;
                });
              },
            )
          ],
        ),
      ),
    );
  }
  ///省略 buildAnimatedDefaultTextStyle 方法代碼
}