Flutter图标切换插件iconswitcher的使用

简介

IconSwitcher 是一个 Flutter 插件，它允许你在 AppBar 小部件上创建一个图标切换器。通过点击图标，可以触发动画并切换不同的视图或状态。

参数说明

以下是 IconSwitcher 的主要参数及其描述：

使用示例

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 IconSwitcher 插件来切换不同的屏幕视图。

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

// 定义主屏幕类
class Screen extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _Screen();
  }
}

// 定义主屏幕状态类
class _Screen extends State<Screen> with TickerProviderStateMixin {
  bool left = true; // 初始状态为左侧图标被选中
  Duration duration = Duration(milliseconds: 400); // 动画持续时间为 400 毫秒

  [@override](/user/override)
  Widget build(BuildContext context) {
    double marginTop = 1.5; // 图标顶部间距
    double height = kToolbarHeight - marginTop * 2; // 图标高度
    double width = height * 2; // 图标宽度

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text("Title"),
          actions: [
            // 使用 IconSwitcher 插件
            IconSwitcher(
              width: width,
              height: height,
              marginTop: marginTop,
              duration: duration,
              icon1: Icons.satellite, // 第一个图标
              icon2: Icons.content_copy, // 第二个图标
              color1: Colors.purple, // 第一个图标的颜色
              color2: Colors.white, // 第二个图标的颜色
              backgroundColor: Colors.black, // 背景颜色
              firstIconSelectedColor: Colors.redAccent, // 第一个选择器的颜色
              secondIconSelectedColor: Colors.orangeAccent, // 第二个选择器的颜色
              onChange: (bool result) { // 状态变化回调
                setState(() {
                  left = result; // 更新状态
                });
              },
            )
          ],
        ),
        body: AnimatedCrossFade( // 动画切换容器
          firstChild: Container(
            color: Colors.black54, // 左侧视图颜色
          ),
          secondChild: Container(
            color: Colors.orange, // 右侧视图颜色
          ),
          duration: duration, // 动画持续时间
          crossFadeState: left ? CrossFadeState.showFirst : CrossFadeState.showSecond, // 当前视图状态
          firstCurve: Curves.bounceOut, // 第一个视图的动画曲线
          secondCurve: Curves.bounceOut, // 第二个视图的动画曲线
        ),
      ),
    );
  }
}