Flutter数字键盘插件simple_numpad的使用

Features

simple_numpad 是一个简单的数字键盘插件，允许用户轻松进行设计修改。

How to use

Installation

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

dependencies:
  simple_numpad: ^1.0.2

Import

在 Dart 文件中导入插件：

import 'package:simple_numpad/simple_numpad.dart';

Example

Basic

基本用法：

SimpleNumpad(
    buttonWidth: 80,
    buttonHeight: 60,
    onPressed: (str) {
        print(str);
    },
);

Circular

圆形按钮：

SimpleNumpad(
    buttonWidth: 60,
    buttonHeight: 60,
    gridSpacing: 10,
    buttonBorderRadius: 30,
    onPressed: (str) {
        print(str);
    },
);

Bordered

带边框的按钮：

SimpleNumpad(
    buttonWidth: 60,
    buttonHeight: 60,
    gridSpacing: 10,
    buttonBorderRadius: 30,
    buttonBorderSide: const BorderSide(
        color: Colors.black,
        width: 1,
    ),
    onPressed: (str) {
        print(str);
    },
);

Backspace & Option

带有退格键和选项按钮：

SimpleNumpad(
    buttonWidth: 60,
    buttonHeight: 60,
    gridSpacing: 10,
    buttonBorderRadius: 30,
    buttonBorderSide: const BorderSide(
        color: Colors.black,
        width: 1,
    ),
    useBackspace: true,
    optionText: 'clear',
    onPressed: (str) {
        print(str);
    },
);

Custom1

自定义样式1：

SimpleNumpad(
    buttonWidth: 80,
    buttonHeight: 60,
    gridSpacing: 5,
    buttonBorderRadius: 8,
    foregroundColor: Colors.white,
    backgroundColor: Colors.black.withAlpha(200),
    textStyle: const TextStyle(
        color: Colors.white,
        fontSize: 22,
        fontWeight: FontWeight.w400,
    ),
    useBackspace: true,
    optionText: 'clear',
    onPressed: (str) {
        print(str);
    },
);

Custom2

自定义样式2：

SimpleNumpad(
    buttonWidth: 60,
    buttonHeight: 60,
    gridSpacing: 5,
    buttonBorderRadius: 30,
    foregroundColor: Colors.white,
    backgroundColor: Colors.black.withAlpha(200),
    textStyle: const TextStyle(
        color: Colors.white,
        fontSize: 22,
        fontWeight: FontWeight.w400,
    ),
    useBackspace: false,
    removeBlankButton: true,
    onPressed: (str) {
        print(str);
    },
);

Custom3

自定义样式3：

SimpleNumpad(
    buttonWidth: 80,
    buttonHeight: 60,
    gridSpacing: 0,
    buttonBorderRadius: 8,
    foregroundColor: Colors.black,
    backgroundColor: Colors.transparent,
    textStyle: const TextStyle(
        color: Colors.black,
        fontSize: 22,
        fontWeight: FontWeight.w400,
    ),
    useBackspace: false,
    removeBlankButton: true,
    onPressed: (str) {
        print(str);
    },
);

onPressed function example

onPressed 函数接收数字键盘上显示的字符串输入。

默认值：

• ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘0’

可选值：

• ‘BACKSPACE’（当设置 useBackspace: true 时可用）
• ${optionText}（你注入到 optionText 的字符串）

示例代码：

void onPressed(String str) {
    switch(str) {
        case 'BACKSPACE':
            // 当设置 "useBackspace: true" 时可用
            removeLast();
            break;
        case 'clear':
            // 这是你注入到 "optionText" 的字符串
            removeAll();
            break;
        default:
            // '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'
            append(str);
            break;
    }
}

void removeLast() {
    if (text.isEmpty) return;
    setState(() {
        text = text.substring(0, text.length - 1);
    });
}

void removeAll() {
    setState(() {
        text = '';
    });
}

void append(String value) {
    setState(() {
        text = text + value;
    });
}

完整示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Numpad Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Scaffold(
        body: Center(
          child: SimpleNumpadExample(),
        ),
      ),
    );
  }
}

class SimpleNumpadExample extends StatefulWidget {
  const SimpleNumpadExample({super.key});

  @override
  State<StatefulWidget> createState() => SimpleNumpadExampleState();
}

class SimpleNumpadExampleState extends State<SimpleNumpadExample> {
  String text = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          text,
          style: const TextStyle(
            color: Colors.black,
            fontSize: 27,
            fontWeight: FontWeight.w600,
          ),
        ),
        const SizedBox(height: 45),
        SimpleNumpad(
          buttonWidth: 100,
          buttonHeight: 80,
          gridSpacing: 0,
          buttonBorderRadius: 8,
          foregroundColor: Colors.black,
          backgroundColor: Colors.transparent,
          textStyle: const TextStyle(
            color: Colors.black,
            fontSize: 22,
            fontWeight: FontWeight.w400,
          ),
          useBackspace: true,
          removeBlankButton: false,
          optionText: 'clear',
          onPressed: onPressed,
        ),
      ],
    );
  }

  void onPressed(String str) {
    switch (str) {
      case 'BACKSPACE':
        // 当设置 "useBackspace: true" 时可用
        removeLast();
        break;
      case 'clear':
        // 这是你注入到 "optionText" 的字符串
        removeAll();
        break;
      default:
        // '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'
        append(str);
        break;
    }
  }

  void removeLast() {
    if (text.isEmpty) return;
    setState(() {
      text = text.substring(0, text.length - 1);
    });
  }

  void removeAll() {
    setState(() {
      text = '';
    });
  }

  void append(String value) {
    setState(() {
      text = text + value;
    });
  }
}

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