Flutter动画切换插件motion_switcher的使用

这个包包含多个非常容易使用的组件，可以将你的自定义组件包装在动画中。

这些动画是隐式的，不需要你创建自己的状态或编排。

组件

• MotionSwitcher - 动画化其子部件之间的切换，类似于 AnimatedSwitcher。
• MotionImage - 基于图像提供者的更改加载和动画化图像。
• MotionView - 动画化类似 PageView 的轮播滚动。
• MotionViewIndicator - 快速实现 MotionView 的页面指示器的部件。

示例

对于详细的示例和一个你可以交互的应用，请查看 lib/widgets/example_ 部件在 例子 中。

MotionSwitcher 动画化列表的加载过程

final list = switch (listStatus) {
  ListStatus.loading => CircularProgressIndicator(),
  ListStatus.empty => Text("Nothing here"),
  ListStatus.paginated => ListView(...),
};

// 子部件将会被动画化，因为它们的类型不同。
//
// 如果要对相同类型的部件进行动画处理，可以通过唯一的键或使用 `[MotionSwitcherTag]` 进行区分。
return MotionSwitcher.vertical(child: list);

MotionImage 加载并动画化网络图像

return MotionImage(
  imageProvider: NetworkImage(...),
  idleChild: CircularProgressIndicator(),
);

MotionView 动画化文本部件的轮播

return MotionView.horizontal(
  controller: pageController,
  clipBehavior: Clip.none,
  itemCount: 4,
  itemBuilder: (context, index) => Text("Showing item $index"),
);

详细示例

• MotionSwitcher - 示例
• MotionImage - 示例
• MotionView - 示例
• MotionViewIndicator - 示例

完整示例Demo

以下是一个完整的示例，展示了如何使用 MotionSwitcher 来实现列表的动画切换。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MotionSwitcher 示例'),
        ),
        body: MotionSwitcherExample(),
      ),
    );
  }
}

class MotionSwitcherExample extends StatefulWidget {
  [@override](/user/override)
  _MotionSwitcherExampleState createState() => _MotionSwitcherExampleState();
}

class _MotionSwitcherExampleState extends State<MotionSwitcherExample> {
  ListStatus _listStatus = ListStatus.loading;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final list = switch (_listStatus) {
      ListStatus.loading => CircularProgressIndicator(),
      ListStatus.empty => Text("Nothing here"),
      ListStatus.paginated => ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
        ),
    };

    return Center(
      child: MotionSwitcher.vertical(
        child: list,
        transitionBuilder: (child, animation) => FadeTransition(
          opacity: animation,
          child: child,
        ),
      ),
    );
  }

  void changeListStatus() {
    setState(() {
      if (_listStatus == ListStatus.loading) {
        _listStatus = ListStatus.empty;
      } else if (_listStatus == ListStatus.empty) {
        _listStatus = ListStatus.paginated;
      } else {
        _listStatus = ListStatus.loading;
      }
    });
  }
}

enum ListStatus { loading, empty, paginated }