Flutter自定义键盘插件flutter_k_keyboard的使用

使用说明

自定义键盘

在 Flutter 中，可以使用 CustomKeyBoard 来创建一个自定义键盘。以下是一个简单的示例：

const like = 'sample';
TextEditingController controller = TextEditingController();
CustomKeyBoard(
  controller: controller, // 必需的 TextEditingController
  maxLength: 12,
  backgroundColor: Colors.grey, 
  buttonColor: Colors.white,
  iconColor: Colors.black,
  backgroundOpacity: 0.3,
  textSize: 25,
  onSubmit: (){          // 必需的回调函数
    Navigator.pop(context);
  },
);

在 CustomKeyBoard 中，你可以更改键盘的长度、背景颜色、按钮颜色、图标颜色、背景透明度和文字大小。

数字键盘

对于数字键盘，可以使用 KNumPad。以下是一个简单的示例：

const like = 'sample';
TextEditingController controller = TextEditingController();
KNumPad(
  controller: controller, // 必需的 TextEditingController
  maxLength: 7,
  buttonSize: 130,
  isNotPhoneNumber: true,
  buttonColor: Colors.indigo,
  iconColor: Colors.amber,
  onSubmit: (){           // 必需的回调函数
    Navigator.pop(context);
  },
);

在 KNumPad 中，你可以更改按钮大小、按钮颜色、图标颜色和最大输入长度。你还可以通过 isNotPhoneNumber 参数来指定是否为电话号码输入。

完整示例代码

以下是在 Flutter 应用程序中使用 flutter_k_keyboard 插件的完整示例代码：

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

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _textController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("k_keyboard"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.1,
              child: const Center(
                child: Text(
                  '你可以在下面输入文本',
                  style: TextStyle(
                    fontSize: 24,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.1,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: TextField(
                  controller: _textController,
                  style: Theme.of(context).textTheme.headlineMedium,
                  decoration: const InputDecoration(
                    hintText: '请输入文本',
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey, width: 0.0),
                    ),
                  ),
                  onTap: () {
                    onOpenKeyBoard(
                      controller: _textController,
                      numericType: false,
                      // isNotPhoneNumber: true,
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void onOpenKeyBoard({
    required TextEditingController controller,
    required bool numericType,
    bool isNotPhoneNumber = false,
  }) {
    var box = SizedBox(
      height: numericType
          ? MediaQuery.of(context).size.height * 0.4
          : MediaQuery.of(context).size.height * 0.25,
      child: numericType
          ? Center(
              child: KNumPad(
                controller: controller,
                maxLength: 11,
                buttonSize: 65,
                isNotPhoneNumber: isNotPhoneNumber,
                onSubmit: () {
                  Navigator.pop(context);
                },
              ),
            )
          : CustomKeyBoard(
              controller: controller,
              maxLength: 12,
              textSize: 15,
              onSubmit: () {
                Navigator.pop(context);
              },
            ),
    );
    showModalBottomSheet(
      elevation: 0,
      context: context,
      isScrollControlled: true,
      barrierColor: Colors.transparent,
      builder: (context) {
        return box;
      },
    );
  }
}