Flutter自定义Widget选择插件widgetpicker的使用

WidgetPicker 是一个基于 NumberPicker 的分支，用于通过相同的用户界面支持分类选择。

示例

以下是一个简单的示例，展示如何使用 WidgetPicker 插件。更多示例可以在 example 中查看。

完整示例代码

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

void main() {
  runApp(new ExampleApp());
}

class ExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WidgetPicker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Widgetpicker example'),
        ),
        body: _WidgetExample(),
      ),
    );
  }
}

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

class _WidgetExampleState extends State<_WidgetExample> {
  String _currentSelection = "Grape"; // 当前选中的值
  String _currentHorizontalSelection = "Grape"; // 水平方向的当前选中值
  List<String> _options = ["Apple", "Banana", "Grape", "Cherry", "Peach"]; // 可选项列表

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 16), // 空白间距
        Text('默认模式', style: Theme.of(context).textTheme.headline6), // 默认模式标题
        WidgetPicker(
          value: _currentSelection, // 当前选中的值
          options: _options, // 可选项列表
          haptics: true, // 是否启用触觉反馈
          onChanged: (value) => setState(() => _currentSelection = value), // 值改变时更新状态
        ),
        SizedBox(height: 32), // 空白间距
        Row(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: [
            IconButton(
              icon: Icon(Icons.remove), // 减号图标
              onPressed: () => setState(() {
                int index = _options.indexOf(_currentSelection); // 获取当前选中的索引
                if (index > 0) {
                  _currentSelection = _options[index - 1]; // 更新为前一项
                }
              }),
            ),
            Text('当前选择: $_currentSelection'), // 显示当前选中的值
            IconButton(
              icon: Icon(Icons.add), // 加号图标
              onPressed: () => setState(() {
                int index = _options.indexOf(_currentSelection); // 获取当前选中的索引
                if (index < _options.length - 1) {
                  _currentSelection = _options[index + 1]; // 更新为后一项
                }
            }),
          ),
        ),
        Divider(color: Colors.grey, height: 32), // 分割线
        SizedBox(height: 16), // 空白间距
        Text('水平模式', style: Theme.of(context).textTheme.headline6), // 水平模式标题
        WidgetPicker(
          value: _currentHorizontalSelection, // 当前选中的水平值
          options: _options, // 可选项列表
          itemHeight: 100, // 每个选项的高度
          axis: Axis.horizontal, // 设置为水平方向
          onChanged: (value) =>
              setState(() => _currentHorizontalSelection = value), // 值改变时更新状态
          decoration: BoxDecoration( // 装饰器
            borderRadius: BorderRadius.circular(16), // 圆角
            border: Border.all(color: Colors.black26), // 边框
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: [
            IconButton(
              icon: Icon(Icons.remove), // 减号图标
              onPressed: () => setState(() {
                int index = _options.indexOf(_currentSelection); // 获取当前选中的索引
                if (index > 0) {
                  _currentSelection = _options[index - 1]; // 更新为前一项
                }
              }),
            ),
            Text('当前水平选择: $_currentHorizontalSelection'), // 显示当前水平选中的值
            IconButton(
              icon: Icon(Icons.add), // 加号图标
              onPressed: () => setState(() {
                int index = _options.indexOf(_currentSelection); // 获取当前选中的索引
                if (index < _options.length - 1) {
                  _currentSelection = _options[index + 1]; // 更新为后一项
                }
              }),
            ),
          ],
        ),
      ],
    );
  }
}