Flutter动画选择项插件animated_item_picker的使用

Flutter动画选择项插件animated_item_picker的使用

简介

animated_item_picker 是一个通用的选择项组件，封装了单选或多选逻辑。它适用于固定大小的项目列表，例如级别、星期几或性别选择器等。该插件支持点击时的透明度动画效果，可以增强用户体验。

预览

使用方法

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 animated_item_picker 依赖：

dependencies:
  animated_item_picker: ^latest_version

2. 创建示例应用

以下是一个完整的示例代码，展示了如何使用 AnimatedItemPicker 组件来创建水平和垂直的选择器，并实现单选和多选功能。

import 'dart:math';
import 'package:animated_item_picker/animated_item_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: HomePage(),
        color: Colors.black,
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  static ColorTween _firstPickerColorTween1 = ColorTween(begin: Colors.white, end: Colors.redAccent);
  static ColorTween _firstPickerColorTween2 = ColorTween(begin: Colors.black, end: Colors.redAccent);

  static ColorTween _secondPickerColorTween1 = ColorTween(begin: Colors.black, end: Colors.yellow);
  static ColorTween _secondPickerColorTween2 = ColorTween(begin: Colors.white, end: Colors.yellow);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Random _random = Random();
  int selectionIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        // 水平单选选择器
        Container(
          padding: EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.grey.shade800,
            borderRadius: BorderRadius.circular(8),
          ),
          child: AnimatedItemPicker(
            axis: Axis.horizontal, // 设置为水平方向
            multipleSelection: false, // 单选
            itemCount: Level.LIST.length, // 项目数量
            pressedOpacity: 0.85, // 点击时的透明度
            programmaticSelection: {Level.LIST.indexOf(Level.BEGINNER)}, // 初始选择项
            expandedItems: true, // 展开项目
            onItemPicked: (index, selected) {
              print("Level: ${Level.LIST[index]}, selected: $selected");
            },
            itemBuilder: (index, animValue) => GenderItemWidget(
              name: Level.LIST[index].toString(), // 项目名称
              borderColor: HomePage._firstPickerColorTween2.transform(animValue)!, // 边框颜色
              textColor: HomePage._firstPickerColorTween1.transform(animValue)!, // 文本颜色
            ),
          ),
        ),
        SizedBox(height: 20),
        // 垂直多选选择器
        Container(
          padding: EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.grey.shade800,
            borderRadius: BorderRadius.circular(8),
          ),
          child: AnimatedItemPicker(
            axis: Axis.vertical, // 设置为垂直方向
            multipleSelection: true, // 多选
            itemCount: DayOfWeek.LIST.length, // 项目数量
            maxItemSelectionCount: 6, // 最大选择项数量
            expandedItems: true, // 展开项目
            programmaticSelection: Set.of(DayOfWeek.FOR_RANDOM[selectionIndex]), // 初始选择项
            onItemPicked: (index, selected) {
              print("Day: ${DayOfWeek.LIST[index]}, selected: $selected");
            },
            itemBuilder: (index, animValue) => DayItemWidget(
              name: DayOfWeek.LIST[index], // 项目名称
              textColor: HomePage._secondPickerColorTween2.transform(animValue)!, // 文本颜色
              backgroundColor: HomePage._secondPickerColorTween1.transform(animValue)!, // 背景颜色
            ),
          ),
        ),
        SizedBox(height: 20),
        // 切换选择项按钮
        CupertinoButton(
          child: Text('SWITCH DAYS PROGRAMMATICALLY'),
          onPressed: () {
            setState(() {
              selectionIndex = _random.nextInt(4); // 随机选择一个初始项
            });
          },
        ),
      ],
    );
  }
}

// 定义级别枚举
enum Level {
  BEGINNER,
  INTERMEDIATE,
  ADVANCED,
  EXPERT
}

extension LevelList on Level {
  static List<Level> LIST = [BEGINNER, INTERMEDIATE, ADVANCED, EXPERT];
}

// 定义星期几枚举
enum DayOfWeek {
  MONDAY,
  TUESDAY,
  WEDNESDAY,
  THURSDAY,
  FRIDAY,
  SATURDAY,
  SUNDAY
}

extension DayOfWeekList on DayOfWeek {
  static List<DayOfWeek> LIST = [
    MONDAY,
    TUESDAY,
    WEDNESDAY,
    THURSDAY,
    FRIDAY,
    SATURDAY,
    SUNDAY
  ];

  static List<Set<int>> FOR_RANDOM = [
    {0, 1},
    {2, 3},
    {4, 5},
    {6}
  ];
}

// 自定义选择项小部件
class GenderItemWidget extends StatelessWidget {
  final String name;
  final Color borderColor;
  final Color textColor;

  GenderItemWidget({
    required this.name,
    required this.borderColor,
    required this.textColor,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        border: Border.all(color: borderColor, width: 2),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        name,
        style: TextStyle(color: textColor, fontSize: 16),
      ),
    );
  }
}

// 自定义选择项小部件
class DayItemWidget extends StatelessWidget {
  final String name;
  final Color textColor;
  final Color backgroundColor;

  DayItemWidget({
    required this.name,
    required this.textColor,
    required this.backgroundColor,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        name,
        style: TextStyle(color: textColor, fontSize: 16),
      ),
    );
  }
}