Flutter自定义数字键盘插件custom_numeric_pad的使用

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

Flutter自定义数字键盘插件custom_numeric_pad的使用

自定义数字键盘小部件 (Custom Numeric Pad Widget)

一个Flutter包，提供了可自定义的数字键盘小部件，可以集成到各种屏幕中，例如支付界面。

概览 (Overview)

自定义数字键盘小部件旨在为Flutter应用程序提供一个可自定义的数字键盘界面，特别适用于需要数字输入的场景，如支付表单。

特性 (Features)

  • 可定制的按钮尺寸
  • 可调整的行间距和列间距
  • 控制按钮颜色和文本样式
  • 可轻松与TextEditingController集成

使用方法 (Usage)

在您的Flutter应用中使用此小部件，遵循以下步骤：

  1. 添加依赖

    在pubspec.yaml文件中添加依赖：

    dependencies:
  custom_numeric_pad: ^1.0.0  # 替换为最新版本

  2. 导入包

    在Dart代码中导入包：

    import 'package:custom_numeric_pad/custom_numpad_package.dart';

  3. 使用CustomNumPad小部件

    在UI中使用CustomNumPad小部件：

    CustomNumPad(
    buttonHeight: 50,
    buttonWidth: 70,
    rowSpacing: 5,
    columnSpacing: 5,
    // 添加其他所需的CustomNumPad参数
)

参数 (Parameters)

参数名 是否必需 默认值 类型 描述
buttonHeight 否 75 double 数字键盘按钮的高度
buttonWidth 否 65 double 数字键盘按钮的宽度
rowSpacing 否 5 double 按钮行之间的垂直间距
columnSpacing 否 5 double 按钮列之间的水平间距
buttonRadius 否 0.0 double 按钮圆角半径
buttonColor 否 F5F6FA Color 按钮背景颜色
bgColor 否 透明 Color 数字键盘背景颜色
cornerRadius 否 0.0 double 数字键盘整体圆角半径
controller 否 null TextEditingController? 文本输入字段控制器
buttonTextStyle 否 TextStyle() TextStyle 数字键盘按钮文本样式
buttonBorder 否 0.0 double 数字键盘按钮边框宽度
buttonBorderColor 否 透明 Color 数字键盘按钮边框颜色

示例 (Examples)

自定义示例

CustomNumPad(
     buttonHeight: 60,
     buttonWidth: 120,
     rowSpacing: 10,
     columnSpacing: 10,
     buttonRadius: 20,
     buttonColor: Colors.red,
     bgColor: Colors.yellow,
     // 添加其他所需的CustomNumPad参数
  )

基本示例

CustomNumPad()

截图 (Screenshots)

以下是自定义数字键盘小部件的实际效果：

作者 (Author)

该项目由Ashutosh Mishra创建并维护。

网站: https://thescriptrailoth.github.io/

如果您对该项目有任何疑问或建议，请联系我：am3718440@gmail.com。感谢您的关注和支持。

更多详情请访问：GitHub

示例代码

import 'package:custom_numeric_pad/custom_numpad_package.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExamplePage(),
    );
  }
}

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

class _ExamplePageState extends State<ExamplePage> {
  late TextEditingController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom NumPad Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 30,),
            TextFormField(
              style: const TextStyle(
                fontSize: 30
              ),
              controller: _controller,
            ),
            SizedBox(height: 10,),
            CustomNumPad(
              controller: _controller,
              buttonHeight: 80,
              buttonWidth: 95,
              // 其他参数...
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义数字键盘插件custom_numeric_pad的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义数字键盘插件custom_numeric_pad的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用custom_numeric_pad插件的一个示例代码案例。假设你已经将custom_numeric_pad插件添加到了你的pubspec.yaml文件中：

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

步骤1：导入插件

在你的Dart文件中导入custom_numeric_pad插件：

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

步骤2：创建自定义数字键盘

下面是一个简单的示例，展示如何在Flutter应用中使用CustomNumericPad。

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  String _inputText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Numeric Pad Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter Number',
              ),
              readOnly: true,  // 使文本框只读，通过键盘输入内容
            ),
            SizedBox(height: 16),
            CustomNumericPad(
              onTextChanged: (String text) {
                setState(() {
                  _inputText = text;
                  _controller.value = _controller.value.copyWith(text: _inputText);
                });
              },
              onDone: () {
                // 当用户完成输入时执行的回调
                print('Done with input: $_inputText');
              },
              onClear: () {
                setState(() {
                  _inputText = '';
                  _controller.clear();
                });
              },
            ),
          ],
        ),
      ),
    );
  }

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

解释

  1. 导入依赖：

    • 导入flutter/material.dart用于基本UI组件。
    • 导入custom_numeric_pad/custom_numeric_pad.dart用于自定义数字键盘。

  2. 主应用：

    • MyApp是一个简单的MaterialApp，包含了一个标题和主题。

  3. 主页面：

    • MyHomePage是一个有状态的Widget，包含一个TextField用于显示输入的数字和一个CustomNumericPad用于输入数字。

  4. 数字键盘：

    • CustomNumericPad的onTextChanged回调会在每次输入改变时更新_inputText和_controller的值。
    • onDone回调会在用户完成输入时执行，例如打印输入的数字。
    • onClear回调会在用户点击清除按钮时清空输入。

  5. 资源管理：

    • 在dispose方法中释放TextEditingController以避免内存泄漏。

通过这个示例，你可以在Flutter应用中集成并使用custom_numeric_pad插件来实现自定义数字键盘的功能。根据你的具体需求，你可以进一步定制和扩展这个示例。

回到顶部