Flutter图标切换插件toggle_icon的使用

Flutter图标切换插件toggle_icon的使用

toggle_icon 是一个 Flutter 包，它为我们提供了在 Flutter 项目中简单实现图标切换的功能。

开始使用

在你的 Flutter 项目的 pubspec.yaml 文件中，添加以下依赖：

dependencies:
    ...
    toggle_icon: ^0.0.1

然后导入该包：

import 'package:toggle_icon/toggle_icon.dart';

使用方法

基本图标切换

以下是一个基本的图标切换示例：

ToggleIcon(
    // 当状态为 true 时显示的图标
    trueIcon: Icon(Icons.favorite), 
    // 当状态为 false 时显示的图标
    falseIcon: Icon(Icons.favorite_border), 
    // 状态为 true 时执行的函数
    trueFunc: () {
        print("已喜欢该帖子");
    }, 
    // 状态为 false 时执行的函数
    falseFunc: () {
        print("未喜欢该帖子");
    }
)

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 toggle_icon 插件：

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

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

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

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

class _ToggleIconExampleState extends State<ToggleIconExample> {
  bool _isToggled = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ToggleIcon(
      // 初始状态
      activeColor: Colors.red,
      inactiveColor: Colors.grey,
      // 当状态为 true 时显示的图标
      trueIcon: Icon(Icons.favorite), 
      // 当状态为 false 时显示的图标
      falseIcon: Icon(Icons.favorite_border), 
      // 状态为 true 时执行的函数
      onToggle: (bool value) {
        setState(() {
          _isToggled = value;
          if (_isToggled) {
            print("已喜欢该帖子");
          } else {
            print("未喜欢该帖子");
          }
        });
      },
    );
  }
}

更多关于Flutter图标切换插件toggle_icon的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图标切换插件toggle_icon的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


toggle_icon 是一个 Flutter 插件，用于在两种状态之间切换图标。它允许你轻松地在两个图标之间切换，并且可以自定义切换动画、颜色等。

安装

首先，你需要在 pubspec.yaml 文件中添加 toggle_icon 依赖：

dependencies:
  flutter:
    sdk: flutter
  toggle_icon: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

ToggleIcon 是一个小部件，它允许你在两种状态之间切换图标。你可以通过 onPressed 回调来处理点击事件，并通过 value 属性来控制当前状态。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Toggle Icon Example'),
        ),
        body: Center(
          child: ToggleIconExample(),
        ),
      ),
    );
  }
}

class ToggleIconExample extends StatefulWidget {
  @override
  _ToggleIconExampleState createState() => _ToggleIconExampleState();
}

class _ToggleIconExampleState extends State<ToggleIconExample> {
  bool _isToggled = false;

  @override
  Widget build(BuildContext context) {
    return ToggleIcon(
      isToggled: _isToggled,
      onPressed: (bool isToggled) {
        setState(() {
          _isToggled = isToggled;
        });
      },
      icon: Icons.favorite_border,
      toggledIcon: Icons.favorite,
      color: Colors.grey,
      toggledColor: Colors.red,
      size: 48.0,
    );
  }
}

参数说明

  • isToggled: 当前图标的状态，true 表示切换到第二个图标，false 表示切换到第一个图标。
  • onPressed: 当用户点击图标时调用的回调函数，参数是切换后的状态。
  • icon: 第一个图标的 IconData。
  • toggledIcon: 第二个图标的 IconData。
  • color: 第一个图标的颜色。
  • toggledColor: 第二个图标的颜色。
  • size: 图标的大小。
  • duration: 切换动画的持续时间，默认为 200ms。
  • curve: 切换动画的曲线，默认为 Curves.easeInOut。

自定义动画

你可以通过 duration 和 curve 参数来自定义切换动画。例如：

ToggleIcon(
  isToggled: _isToggled,
  onPressed: (bool isToggled) {
    setState(() {
      _isToggled = isToggled;
    });
  },
  icon: Icons.star_border,
  toggledIcon: Icons.star,
  color: Colors.grey,
  toggledColor: Colors.amber,
  size: 48.0,
  duration: Duration(milliseconds: 500),
  curve: Curves.bounceOut,
)
回到顶部