Flutter选择增强插件 selectify 的使用

Selectify 是一个功能强大的 Flutter 库，用于简化选择组件的创建。它支持单选和多选模式，并提供了多种布局选项（如网格、列表和流式布局），以及丰富的样式和行为配置。

主要特性

• 单选和多选支持：灵活配置单选或多选模式。
• 高度可定制：控制每个选择项的布局、样式和交互。
• 多种布局：支持网格、流式布局等，可调整跨轴数量和方向。
• 自定义选择模型：使用提供的 SelectionModel 类或自定义选择模型。
• 支持自定义小部件：通过自定义项构建器扩展功能，创建独特的选择体验。

开始使用

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

dependencies:
  selectify: ^1.0.1

然后导入库：

import 'package:selectify/selectify.dart';

使用示例

单选示例

流式布局

在流式布局中，项目会根据屏幕宽度自动调整：

SingleSelection<String>.wrap(
    initialValue: items.last,
    items: items,
    onChanged: (item) {
      print('Selected item: $item');
    },
),

网格布局

将项目组织成网格，指定每行的项目数量：

SingleSelection<String>.grid(
    crossAxisCount: 2, // 每行显示的项目数量
    initialValue: items.last,
    items: items,
    onChanged: (item) {
      print('Selected item: $item');
    },
),

多选示例

流式布局

启用多选并以单行布局显示：

MultipleSelection<String>.wrap(
    initialValue: items.last,
    items: items,
    onChanged: (items) {
      print('Selected items: $items');
    },
    direction: Axis.horizontal,
),

自定义布局

使用自定义的 SelectionModel 和 itemBuilder 来实现更复杂的布局：

MultipleSelection<SelectionModel<String>>.grid(
    crossAxisCount: 2,
    items: items,
    initialValue: items.take(2).toList(),
    onChanged: (items) {
      print('Selected items: $items');
    },
    itemBuilder: (context, item, index, selected) {
        return Opacity(
            opacity: item.enable ? 1.0 : 0.5,
            child: Container(
                padding: EdgeInsets.all(8),
                decoration: BoxDecoration(
                  border: Border.all(
                    color: selected ? Colors.blueAccent : Colors.black54,
                  ),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                        Icon(
                          selected ? Icons.check_box : Icons.check_box_outline_blank_outlined,
                          color: selected ? Colors.blueAccent : Colors.black54,
                        ),
                        SizedBox(width: 8),
                        Expanded(
                          child: Text(item.valueShow ?? item.code),
                        ),
                    ],
                ),
            ),
        );
    },
),

完整示例 Demo

以下是一个完整的示例应用，展示了如何使用 selectify 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Selectify Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<SelectionModel<String>> items = [
    SelectionModel(code: 'A', valueShow: 'Option A', enable: true),
    SelectionModel(code: 'B', valueShow: 'Option B', enable: true),
    SelectionModel(code: 'C', valueShow: 'Option C', enable: false),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: Text('Single Wrap'),
            ),
            SingleSelection<SelectionModel<String>>.wrap(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              initialValue: items.last,
              items: items,
              onChanged: (item) {
                print('Selected single wrap item: ${item.code}');
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: Text('Single Grid'),
            ),
            SingleSelection<SelectionModel<String>>.grid(
              crossAxisCount: 2,
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              items: items,
              initialValue: items[1],
              onChanged: (item) {
                print('Selected single grid item: ${item.code}');
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: Text('Multiple Wrap'),
            ),
            MultipleSelection<SelectionModel<String>>.wrap(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              items: items,
              initialValue: items.take(2).toList(),
              onChanged: (items) {
                print('Selected multiple wrap items: ${items.map((e) => e.code)}');
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: Text('Custom'),
            ),
            MultipleSelection<SelectionModel<String>>.grid(
              crossAxisCount: 2,
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              items: items,
              initialValue: items.take(2).toList(),
              onChanged: (items) {
                print('Selected custom items: ${items.map((e) => e.code)}');
              },
              itemBuilder: (context, item, index, selected) {
                return Opacity(
                  opacity: item.enable ? 1.0 : 0.5,
                  child: Container(
                    padding: EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: selected ? Colors.blueAccent : Colors.black54,
                      ),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(
                          selected
                              ? Icons.check_box
                              : Icons.check_box_outline_blank_outlined,
                          color: selected ? Colors.blueAccent : Colors.black54,
                        ),
                        SizedBox(width: 8),
                        Expanded(
                          child: Text(item.valueShow ?? item.code),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: Text('Horizontal Scroll'),
            ),
            MultipleSelection<SelectionModel<String>>.wrap(
              direction: Axis.horizontal,
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              items: items,
              initialValue: items.take(2).toList(),
              onChanged: (items) {
                print('Selected horizontal scroll items: ${items.map((e) => e.code)}');
              },
            ),
          ],
        ),
      ),
    );
  }
}