Flutter增减数字输入框插件inc_dec_textfield的使用

简介

inc_dec_textField 是一个简单的带有按钮的 TextFormField，支持增量/减量操作，并且具有一些额外的属性，例如允许负值和显示货币符号。

开始使用

步骤 1：安装插件

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

dependencies:
  inc_dec_text_field: ^最新版本号

然后运行以下命令以安装依赖：

flutter pub get

步骤 2：导入插件

在需要使用的文件中导入插件：

import 'package:inc_dec_text_field/inc_dec_text_field.dart';

步骤 3：使用插件

在你的 Flutter 项目中，可以像其他 Flutter 小部件一样使用 IncDecTextField。以下是一个示例代码：

IncDecTextField(
  controller: incDecController, // 必需的控制器
  borderColor: Colors.grey,    // 输入框边框颜色
  currency: 'Day',             // 货币符号
  isCurrency: true,            // 是否显示货币符号
  isNegativeRequired: true,    // 是否允许负值
)

可配置选项

IncDecTextField 提供了一些可配置的选项，可以根据需求进行自定义：

完整示例代码

以下是一个完整的示例代码，展示了如何使用 inc_dec_text_field 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IncDecTextField 示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个控制器用于管理输入框内容
  final TextEditingController incDecController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取屏幕宽度
    var width = MediaQuery.of(context).size.width;

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text("IncDecTextField 示例"),
      ),
      body: Container(
        alignment: Alignment.topLeft,
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
        width: width * 0.96,
        child: IncDecTextField(
          controller: incDecController, // 使用控制器
          borderColor: Colors.grey,    // 边框颜色
          currency: 'Day',             // 显示货币符号
          isCurrency: true,            // 启用货币符号
          isNegativeRequired: true,    // 允许负值
          textStyle: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.normal,
            fontSize: 16,
          ),
          incIcon: const Icon(Icons.add, color: Colors.black), // 增量按钮图标
          decIcon: const Icon(Icons.remove, color: Colors.black), // 减量按钮图标
        ),
      ),
    );
  }
}