Flutter输入选择器插件spinner_input_plus的使用

spinner_input_plus 是一个类似于 HTML5 input-spinner 的 Flutter 输入选择器插件。它允许用户通过按钮增加或减少数值，并且支持多种自定义选项，如步长、最小值、最大值、样式等。

示例演示

以下是一个完整的示例 Demo，展示了如何在 Flutter 应用中使用 spinner_input_plus 插件。

1. 添加依赖

首先，在您的 pubspec.yaml 文件中添加 spinner_input_plus 依赖：

dependencies:
  flutter:
    sdk: flutter
  spinner_input_plus: ^最新版本号

请确保将 ^最新版本号 替换为实际的最新版本号。

2. 示例代码

以下是完整的示例代码，展示了几种不同的配置和自定义选项：

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

void main() => runApp(const MySpinner());

class MySpinner extends StatefulWidget {
  const MySpinner({Key? key}) : super(key: key);

  @override
  MySpinnerState createState() => MySpinnerState();
}

class MySpinnerState extends State<MySpinner> {
  double spinner = 0;
  double spinner3 = -5;
  double spinner4 = 20;
  double spinner5 = 82.654;
  double spinner6 = 5;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Spinner Input Plus Example')),
        body: Column(
          children: <Widget>[
            // 默认的 Spinner
            Container(
              margin: const EdgeInsets.all(20),
              child: SpinnerInput(
                spinnerValue: spinner,
                onChange: (newValue) {
                  setState(() {
                    spinner = newValue;
                  });
                },
              ),
            ),

            // 设置步长（可以是整数或小数）
            Container(
              margin: const EdgeInsets.all(20),
              child: SpinnerInput(
                minValue: 0,
                maxValue: 200,
                step: 5,
                plusButton: SpinnerButtonStyle(
                  elevation: 0,
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(0),
                ),
                minusButton: SpinnerButtonStyle(
                  elevation: 0,
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(0),
                ),
                middleNumberWidth: 70,
                middleNumberStyle: const TextStyle(fontSize: 21),
                middleNumberBackground: Colors.yellowAccent.withOpacity(0.5),
                spinnerValue: spinner3,
                onChange: (newValue) {
                  setState(() {
                    spinner3 = newValue;
                  });
                },
              ),
            ),

            // 禁用长按和输入弹出框
            Container(
              margin: const EdgeInsets.all(20),
              child: SpinnerInput(
                minValue: 0,
                maxValue: 200,
                disabledLongPress: true,
                disabledPopup: true,
                step: 5,
                spinnerValue: spinner4,
                onChange: (newValue) {
                  setState(() {
                    spinner4 = newValue;
                  });
                },
              ),
            ),

            // 更多自定义按钮
            Container(
              margin: const EdgeInsets.all(20),
              child: SpinnerInput(
                minValue: 0,
                maxValue: 200,
                step: 5.524,
                fractionDigits: 3,
                plusButton: SpinnerButtonStyle(
                  color: Colors.green,
                  height: 60,
                  width: 60,
                  elevation: 1,
                  highlightElevation: 10,
                  child: const Icon(Icons.thumb_up),
                ),
                minusButton: SpinnerButtonStyle(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(0),
                ),
                spinnerValue: spinner5,
                onChange: (newValue) {
                  setState(() {
                    spinner5 = newValue;
                  });
                },
              ),
            ),

            // 支持从右到左的布局
            Container(
              margin: const EdgeInsets.all(50),
              child: SpinnerInput(
                direction: TextDirection.rtl,
                spinnerValue: spinner6,
                onChange: (newValue) {
                  setState(() {
                    spinner6 = newValue;
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行应用

将上述代码保存到您的 Flutter 项目中，并运行应用。您将看到多个不同配置的 SpinnerInput 组件，每个组件都展示了不同的功能和自定义选项。

4. 自定义选项

• minValue 和 maxValue：设置最小值和最大值。
• step：设置每次点击按钮时数值变化的步长。
• plusButton 和 minusButton：自定义加号和减号按钮的样式。
• middleNumberStyle 和 middleNumberBackground：自定义中间数字的样式和背景。
• disabledLongPress 和 disabledPopup：禁用长按和输入弹出框。
• fractionDigits：设置小数点后的位数。
• direction：支持从右到左的布局。

通过这些选项，您可以根据需求灵活地定制 SpinnerInput 组件。

希望这个示例能帮助您更好地理解和使用 spinner_input_plus 插件！