Flutter数值选择插件flutter_spinbox的使用

SpinBox for Flutter

SpinBox for Flutter 是一个用于Flutter的数字输入组件，它结合了输入框和增减按钮，方便用户快速、准确地调整数值。

该组件提供了两种风格的设计：

Material Design：遵循Material设计规范
Cupertino (iOS-style) Design：遵循iOS风格设计

Material Design 示例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Material SpinBox Example')),
        body: Center(
          child: SpinBox(
            min: 1,
            max: 100,
            value: 50,
            onChanged: (value) => print(value),
          ),
        ),
      ),
    );
  }
}

Cupertino (iOS-style) Design 示例

import 'package:flutter/material.dart';
import 'package:flutter_spinbox/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Cupertino SpinBox Example')),
        body: Center(
          child: CupertinoSpinBox(
            min: 1,
            max: 100,
            value: 50,
            onChanged: (value) => print(value),
          ),
        ),
      ),
    );
  }
}

更多功能示例

以下是一个包含更多功能的完整示例，展示了如何使用不同的配置选项：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('SpinBox for Flutter'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.swap_horiz)),
                Tab(icon: Icon(Icons.swap_vert)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              HorizontalSpinBoxPage(),
              VerticalSpinBoxPage(),
            ],
          ),
        ),
      ),
    );
  }
}

class HorizontalSpinBoxPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: ListView(
        children: [
          Padding(
            child: SpinBox(
              value: 10,
              decoration: InputDecoration(labelText: 'Basic'),
            ),
            padding: const EdgeInsets.all(16),
          ),
          Padding(
            child: SpinBox(
              value: 10,
              readOnly: true,
              decoration: InputDecoration(labelText: 'Read-only'),
            ),
            padding: const EdgeInsets.all(16),
          ),
          Padding(
            child: SpinBox(
              value: 5,
              digits: 2,
              decoration: InputDecoration(labelText: '2 digits'),
            ),
            padding: const EdgeInsets.all(16),
          ),
          Padding(
            child: SpinBox(
              max: 10.0,
              value: 5.0,
              decimals: 1,
              step: 0.1,
              decoration: InputDecoration(labelText: 'Decimals'),
            ),
            padding: const EdgeInsets.all(16),
          ),
          Padding(
            child: SpinBox(
              min: -1.0,
              max: 1.0,
              value: 0.25,
              decimals: 3,
              step: 0.001,
              acceleration: 0.001,
              decoration: InputDecoration(labelText: 'Accelerated'),
            ),
            padding: const EdgeInsets.all(16),
          ),
          Padding(
            child: SpinBox(
              value: 50,
              decoration: InputDecoration(
                hintText: 'Hint',
                labelText: 'Decorated',
                helperText: 'Helper',
                prefix: const Text('Prefix'),
                suffix: const Text('Suffix'),
                counterText: 'Counter',
              ),
              validator: (text) => text!.isEmpty ? 'Invalid' : null,
            ),
            padding: const EdgeInsets.all(16),
          ),
        ],
      ),
    );
  }
}

class VerticalSpinBoxPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: Center(
        child: ListView(
          shrinkWrap: true,
          children: [
            Center(
              child: Container(
                width: 128,
                child: SpinBox(
                  min: -50,
                  max: 50,
                  value: 15,
                  spacing: 24,
                  direction: Axis.vertical,
                  textStyle: TextStyle(fontSize: 48),
                  incrementIcon: Icon(Icons.keyboard_arrow_up, size: 64),
                  decrementIcon: Icon(Icons.keyboard_arrow_down, size: 64),
                  iconColor: MaterialStateProperty.resolveWith((states) {
                    if (states.contains(MaterialState.disabled)) {
                      return Colors.grey;
                    }
                    if (states.contains(MaterialState.error)) {
                      return Colors.red;
                    }
                    if (states.contains(MaterialState.focused)) {
                      return Colors.blue;
                    }
                    return Colors.black;
                  }),
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    contentPadding: const EdgeInsets.all(24),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

使用指南

Spin Box 组件最适合以下场景：

处理大范围的数值和高精度需求
用户通常已经知道要输入的确切值
用户需要精确调整之前输入的值

作为一般规则，Spin Box 在以下情况下非常有用：

滑块等控件不够精确
转盘等控件无法提供足够的数值范围
纯文本框对于数值调整不方便（例如：打开虚拟键盘、移动光标、删除旧值、输入新值等）

希望这个帖子能帮助你更好地理解和使用 flutter_spinbox 插件。如果你有任何问题或需要进一步的帮助，请随时提问！

更多关于Flutter数值选择插件flutter_spinbox的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼•2 天前

更多关于Flutter数值选择插件flutter_spinbox的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用flutter_spinbox插件的示例代码。flutter_spinbox是一个用于数值选择的Flutter插件，它提供了一个旋转框（SpinBox）小部件，允许用户通过点击增加或减少数值。

首先，你需要在你的pubspec.yaml文件中添加flutter_spinbox依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_spinbox: ^latest_version  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用SpinBox小部件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SpinBox Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SpinBoxDemo(),
    );
  }
}

class SpinBoxDemo extends StatefulWidget {
  @override
  _SpinBoxDemoState createState() => _SpinBoxDemoState();
}

class _SpinBoxDemoState extends State<SpinBoxDemo> {
  int _value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SpinBox Demo'),
      ),
      body: Center(
        child: SpinBox(
          value: _value,
          minValue: -10,
          maxValue: 10,
          step: 1,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'SpinBox',
          ),
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个SpinBox小部件。以下是关键点的解释：

依赖引入：在pubspec.yaml文件中添加flutter_spinbox依赖。
SpinBox小部件：在SpinBoxDemo页面的中心位置放置了一个SpinBox小部件。
状态管理：使用_SpinBoxDemoState类中的_value变量来存储当前数值，并在SpinBox的onChanged回调中更新该值。
SpinBox属性：
- value：当前数值。
- minValue：允许的最小值。
- maxValue：允许的最大值。
- step：每次增加或减少的数值步长。
- decoration：输入框的装饰，这里我们添加了一个标签和边框。

运行这个示例代码，你会看到一个带有数值选择框的Flutter应用，用户可以通过点击增加或减少数值。

希望这对你有所帮助！如果有其他问题，欢迎继续提问。