Flutter开发日记——Flutter动画AnimatedDefaultTextStyle详解

本篇文章已授权微信公众号 YYGeeker 独家发布转载请标明出处

控件介绍

1. AnimatedDefaultTextStyle表示一个文本样式的动画组件，通过修改组件的style属性，系统将会通过动画的方式自动切换到新的style样式

构造函数

AnimatedDefaultTextStyle({
    Key key,
    @required this.child,              //子元素，通常用Text组件
    @required this.style,              //子元素的样式，用于动画变化
    this.textAlign,                    //如果文本超过1行时，所有换行的字体的对齐方式，可以是左对齐、右对齐
    this.softWrap = true,              //文本是否应该在软换行符处换行，软换行和硬换行是word用法，具体自阅
    this.overflow = TextOverflow.clip, //超过文本行数区域的裁剪方式
    this.maxLines,                     //文本最大行数，默认是1
    Curve curve = Curves.linear,       //动画插值器
    @required Duration duration,       //动画播放时长
    Duration reverseDuration,          //倒退动画播放时长
})

使用方法

1、编写动画组件

通过_isSelected的值控制样式的切换

AnimatedDefaultTextStyle(
  softWrap: false,
  textAlign: TextAlign.right,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  curve: Curves.linear,
  duration: Duration(seconds: 1),
  child: Text("Flutter message you!!!"),
  style: _isSelected
      ? TextStyle(
          fontSize: 10.0,
          color: Colors.red,
          fontWeight: FontWeight.bold,
        )
      : TextStyle(
          fontSize: 50.0,
          color: Colors.black,
          fontWeight: FontWeight.w300,
        ),
),

2、通过计时器控制样式的切换

Timer.periodic(Duration(seconds: 1), (timer) {
  setState(() {
    switch (time % 4) {
      case 0:
        _isSelected = false;
        break;
      case 2:
        _isSelected = true;
        break;
    }
    time++;
  });
});

效果图

源代码

import 'dart:async';

import 'package:flutter/material.dart';

var time = 0;
var _isSelected = true;

class Day18 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: WeWidget(),
    );
  }
}

class WeWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return WeWidgetState();
  }
}

class WeWidgetState extends State<WeWidget> {
  WeWidgetState() {
    Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        switch (time % 4) {
          case 0:
            _isSelected = false;
            break;
          case 2:
            _isSelected = true;
            break;
        }
        time++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day18"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        AnimatedDefaultTextStyle(
          softWrap: false,
          textAlign: TextAlign.right,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          curve: Curves.linear,
          duration: Duration(seconds: 1),
          child: Text("Flutter message you!!!"),
          style: _isSelected
              ? TextStyle(
                  fontSize: 10.0,
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                )
              : TextStyle(
                  fontSize: 50.0,
                  color: Colors.black,
                  fontWeight: FontWeight.w300,
                ),
        ),
      ],
    );
  }
}