Flutter动画布局插件 animated_fractionally_sized_box 的使用

AnimatedFractionallySizedBox 是 FractionallySizedBox 的动画版本，它可以在一段时间内逐渐改变其属性值。当属性发生变化时，它会自动使用提供的曲线和持续时间进行动画过渡。

描述

AnimatedFractionallySizedBox 会在属性值变化时自动在旧值和新值之间进行动画过渡，使用的曲线和持续时间由开发者提供。未设置的属性不会被动画化。它的子组件及其后代组件不会被动画化。

使用方法

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  animated_fractionally_sized_box: ^2.0.1

导入包

在 Dart 文件中导入该包：

import 'package:animated_fractionally_sized_box/animated_fractionally_sized_box.dart';

使用示例

AnimatedFractionallySizedBox 的使用方式与 FractionallySizedBox 类似：

AnimatedFractionallySizedBox(
    widthFactor: widthFactor,
    heightFactor: heightFactor,
    alignment: Alignment.centerLeft,
    child: ...
)

完整示例 Demo

下面是一个完整的示例，展示了如何使用 AnimatedFractionallySizedBox 来创建一个简单的动画效果：

import 'package:animated_fractionally_sized_box/animated_fractionally_sized_box.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Fractionally Sized Box Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final int min = 0;
  final int max = 10;
  final double height = 10;
  late int counter;

  @override
  void initState() {
    counter = min;
    super.initState();
  }

  void increment() {
    setState(() {
      counter++;
      counter = counter.clamp(min, max);
    });
  }

  void decrement() {
    setState(() {
      counter--;
      counter = counter.clamp(min, max);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(8.0),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Stack(
              children: [
                Container(
                  height: height,
                  color: Colors.black,
                ),
                AnimatedFractionallySizedBox(
                  duration: Duration(milliseconds: 500),
                  widthFactor: counter / max,
                  child: Container(
                    height: height,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
            ElevatedButton(onPressed: increment, child: Text('Increment')),
            ElevatedButton(onPressed: decrement, child: Text('Decrement')),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的界面，包含一个黑色背景的容器和一个绿色背景的容器。绿色容器的宽度会根据计数器的值进行动画变化。点击“Increment”按钮会增加计数器的值，点击“Decrement”按钮会减少计数器的值。每次计数器的值变化时，绿色容器的宽度都会平滑地进行动画过渡。