Flutter选择器插件flutter_spinner_item_selector的使用

Flutter选择器插件flutter_spinner_item_selector的使用

简介

flutter_spinner_item_selector 是一个为 Flutter 应用程序提供简单方式定义选择器项的包。该包可以处理任何提供的列表项（可选类型），例如您可以提供小部件列表、枚举或其他对象。

安装

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_spinner_item_selector: [latest]

然后运行 flutter pub get 来获取该包。

使用

首先，导入该包：

import 'package:flutter_spinner_item_selector/flutter_spinner_item_selector.dart';

如何使用

以下是一个简单的使用示例：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Item Selector Example',
      darkTheme: ThemeData(
        primarySwatch: Colors.deepPurple,
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  Icon? selectedItem;

  void _showItemSelector() async {
    final selected = await showSpinnerItemSelector<Icon>(
      context,
      items: const [
        Icon(Icons.home),
        Icon(Icons.back_hand),
        Icon(Icons.face),
        Icon(Icons.bluetooth),
        Icon(Icons.bolt_outlined),
        Icon(Icons.read_more),
      ],
      selectedItemToWidget: (item) => item,
      nonSelectedItemToWidget: (item) => Opacity(opacity: 0.4, child: item as Icon),
      itemHeight: 50,
      height: 150,
      width: 100,
      spinnerHeight: 140,
      spinnerWidth: 90,
    );

    if (selected != null) {
      setState(() {
        selectedItem = selected;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Item Selector Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Selected Item:', style: TextStyle(fontSize: 18)),
            const SizedBox(height: 10),
            selectedItem != null ? selectedItem! : const Text('. . .'),
            const SizedBox(height: 20),
            FilledButton(onPressed: _showItemSelector, child: const Text('Select an Item')),
          ],
        ),
      ),
    );
  }
}

完全自定义的包

您可以根据需要自定义选择器的各种选项：

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

// --------
showSpinnerItemSelector(
    context,
    items: const [
        Icon(Icons.home),
        Icon(Icons.back_hand),
        Icon(Icons.face),
        Icon(Icons.bluetooth),
        Icon(Icons.bolt_outlined),
        Icon(Icons.read_more),
    ],
    selectedItemToWidget: (item) => item,
    nonSelectedItemToWidget: (item) => Opacity(opacity: 0.4, child: item as Icon),
    itemHeight: 50,
    height: 150,
    width: 100,
    spinnerHeight: 140,
    spinnerWidth: 90,
    title: 'Custom Item Selector',
    backgroundColor: Colors.grey[100],
    foregroundColor: Colors.black,
    titleStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    buttonStyle: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.blue),
    ),
    buttonTextStyle: TextStyle(fontSize: 16, color: Colors.white),
    barrierDismissible: true,
    // ... 其他定制选项
);

直接使用SpinnerItemSelector组件

您还可以直接在应用中使用SpinnerItemSelector组件：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Column(
        children: [
          Text("text"),
          // 使用 `SpinnerItemSelector`
          SpinnerItemSelector<Widget>(
            // 提供项列表
            items: const [
                ListTile(leading: Icon(Icons.home),title: Text("Home")),
                ListTile(leading: Icon(Icons.book),title: Text("Book")),
                ListTile(leading: Icon(Icons.sd_card),title: Text("sdCard")),
            ],
            scrollAxis: Axis.vertical, // 可定制
            selectedItemToWidget: (item) => Container(child: item), // 将项映射到小部件
            nonSelectedItemToWidget: (item) => Container(child: item), // 将项映射到小部件
            onSelectedItemChanged: (item) {
                // 处理选定项
            },
            height: _spinnerHeight,
            width: _spinnerWidth,
            itemHeight: _itemHeight,
            itemWidth: _itemWidth,
            spinnerBgColor: _spinnerBgColor,
          ),
        ],
      ),
    );
  }
}