Flutter商品数量选择插件item_count_number_button的使用

Flutter商品数量选择插件item_count_number_button的使用

插件介绍

item_count_number_button 是一个Flutter插件，允许你轻松实现带有增减按钮的可自定义商品数量选择控件。这个控件特别适用于需要管理商品数量的场景，例如购物车或库存管理系统。

功能特性

• 增加和减少按钮用于调整商品数量。
• 可定义最小值和最大值。
• 可指定显示的数量小数位数。
• 按钮颜色、大小和文本样式可自定义。
• 提供回调函数处理数量变化。
• 平滑动画提供视觉上吸引人的用户体验。

安装

在 pubspec.yaml 文件中添加 item_count_number_button 作为依赖项：

dependencies:
  item_count_number_button: ^1.0.0

入门指南

在Dart文件中导入插件：

import 'package:item_count_number_button/item_count_number_button.dart';

在Flutter应用中使用 ItemCount 控件：

ItemCount(
  initialValue: 0, // 初始值
  minValue: 0,     // 最小值
  maxValue: 10,    // 最大值
  decimalPlaces: 0, // 小数位数
  onChanged: (value) {
    // 处理数量变化
    print('Selected value: $value');
  },
),

Widget属性

ItemCount 控件接受以下属性：

• initialValue（必填）：计数器的初始值。
• minValue（必填）：用户可以选择的最小值。
• maxValue（必填）：用户可以选择的最大值。
• decimalPlaces（必填）：计数器所需的显示小数位数。
• onChanged（必填）：当计数器值发生变化时调用的回调函数，参数类型为 num。
• step：增加或减少计数器时使用的步长，默认为1。
• color：增减按钮的颜色，如果不指定，则使用应用程序主题的主色。
• textStyle：计数器值显示的文本样式。
• buttonSizeWidth：增减按钮的宽度，默认为30。
• buttonSizeHeight：增减按钮的高度，默认为25。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 item_count_number_button 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Item Count Number Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ItemCountDemo(),
    );
  }
}

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

class _ItemCountDemoState extends State<ItemCountDemo> {
  double _currentValue = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Item Count Number Button Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前选择的数量:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Text(
              '$_currentValue',
              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 40),
            ItemCount(
              initialValue: _currentValue,
              minValue: 0,
              maxValue: 10,
              decimalPlaces: 0,
              step: 1,
              color: Colors.blue,
              buttonSizeWidth: 40,
              buttonSizeHeight: 40,
              textStyle: TextStyle(fontSize: 24, color: Colors.black),
              onChanged: (value) {
                setState(() {
                  _currentValue = value;
                });
                print('Selected value: $value');
              },
            ),
          ],
        ),
      ),
    );
  }
}