Flutter数字编辑控制插件number_editing_controller的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter数字编辑控制插件number_editing_controller的使用

插件介绍

number_editing_controller 是一个用于Flutter应用的数字输入控制器插件。它可以在用户输入时将文本字段格式化为数字(包括小数、货币或整数),并从输入中提取 num 值。

以下是该插件的一些特性:

  • 在用户输入时格式化文本字段为数字(小数、货币或整数)
  • 从输入中提取 num
  • 提供了多种控制器定义方式,例如 integer()decimal()currency()

以下是一个示例截图:

iPhone 14

开始使用

首先需要安装该库:

flutter pub add number_editing_controller

使用方法

/example 目录下可以找到一个完整的示例。下面是具体的使用步骤和代码示例。

整数输入

定义一个整数输入控制器:

final controller = NumberEditingTextController.integer();
小数输入

定义一个小数输入控制器:

final controller = NumberEditingTextController.decimal();
货币金额输入

定义一个货币金额输入控制器:

final controller = NumberEditingTextController.currency();

你可以选择性地提供 locale 参数以使用基于区域的格式化。对于 currency() 方法,还有 currencyNamecurrencySymbol 参数可用。你也可以通过设置 allowNegative 参数为 false 来禁止负数输入。

将这个 controller 设置为目标 TextField 的控制器:

TextField(
  controller: controller,
)

现在,TextField 会过滤掉所有非整数符号。你可以通过 controller.number 提取数值。

完整示例 Demo

下面是一个完整的示例代码,展示了如何使用 number_editing_controller 插件来创建不同的输入类型(整数、小数和货币):

import 'package:flutter/material.dart';
// 假设这些文件已经存在,并且包含了相应的实现
// import 'package:number_editing_controller_example/variants/currency_input.dart';
// import 'package:number_editing_controller_example/variants/decimal_input.dart';
// import 'package:number_editing_controller_example/variants/integer_input.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
          bottom: const TabBar(
            tabs: [
              Tab(text: 'Currency'),
              Tab(text: 'Integer'),
              Tab(text: 'Double'),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            // CurrencyInput(), // 实现货币输入的组件
            // IntegerInput(), // 实现整数输入的组件
            // DecimalInput(), // 实现小数输入的组件
            Center(child: Text('Currency Input Example')), // 示例内容
            Center(child: Text('Integer Input Example')), // 示例内容
            Center(child: Text('Decimal Input Example')), // 示例内容
          ],
        ),
      ),
    );
  }
}

更多关于Flutter数字编辑控制插件number_editing_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter数字编辑控制插件number_editing_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 number_editing_controller 插件的示例代码。这个插件用于在 Flutter 中方便地管理数字输入。首先,确保你已经在 pubspec.yaml 文件中添加了 number_editing_controller 依赖:

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

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

下面是一个完整的 Flutter 应用示例,展示如何使用 NumberEditingController

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

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

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

class NumberEditingControllerDemo extends StatefulWidget {
  @override
  _NumberEditingControllerDemoState createState() => _NumberEditingControllerDemoState();
}

class _NumberEditingControllerDemoState extends State<NumberEditingControllerDemo> {
  final NumberEditingController _controller = NumberEditingController(
    initialValue: 0.0,
    min: 0.0,
    max: 100.0,
    step: 1.0,
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NumberEditingController Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller.textEditingController,
              decoration: InputDecoration(
                labelText: 'Enter a number',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _controller.clear();
                  },
                ),
              ),
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              inputFormatters: [
                FilteringTextInputFormatter.digitsOnly, // Only allow digits, you may want to customize this for decimal input
              ],
            ),
            SizedBox(height: 16.0),
            Text(
              'Current Value: $_controller.value',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _controller.value += _controller.step;
                });
              },
              child: Text('Increment'),
            ),
            SizedBox(height: 8.0),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _controller.value -= _controller.step;
                });
              },
              child: Text('Decrement'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们创建了一个 NumberEditingController 实例,并设置了初始值、最小值、最大值和步长。
  2. NumberEditingController 提供了一个 TextEditingController,可以将其直接传递给 TextField
  3. 我们使用 Text 小部件显示当前的值。
  4. 我们创建了两个按钮,用于增加和减少当前值。

请注意,FilteringTextInputFormatter.digitsOnly 仅允许输入数字字符。如果你需要允许小数输入,你可能需要自定义输入格式化程序或使用其他方式处理输入。

这个示例展示了 NumberEditingController 的基本用法,包括初始化、监听值的变化、以及通过按钮控制值的变化。

回到顶部