flutter 自定义键盘

在Flutter中，可以使用自定义Widget来实现自定义键盘。以下是实现自定义键盘的一般步骤：

1. 创建一个StatefulWidget，该Widget将显示自定义键盘。

2. 实现一个键盘布局。可以使用Flutter提供的各种Widget（如Container、Row、Column等）来创建键盘布局，并使用GestureDetector Widget来处理键盘按钮的点击事件。

3. 在需要使用自定义键盘的地方，使用Flutter的FocusNode来控制输入框的焦点，并将自定义键盘与输入框关联起来。

下面是一个简单的实现自定义键盘的示例代码：

import 'package:flutter/material.dart';

class CustomKeyboard extends StatefulWidget {
  @override
  _CustomKeyboardState createState() => _CustomKeyboardState();
}

class _CustomKeyboardState extends State<CustomKeyboard> {
  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          TextField(
            controller: _textEditingController,
            focusNode: FocusNode(),
            decoration: InputDecoration(
              hintText: 'Input something',
            ),
          ),
          Row(
            children: [
              CustomButton('1'),
              CustomButton('2'),
              CustomButton('3'),
            ],
          ),
          Row(
            children: [
              CustomButton('4'),
              CustomButton('5'),
              CustomButton('6'),
            ],
          ),
          Row(
            children: [
              CustomButton('7'),
              CustomButton('8'),
              CustomButton('9'),
            ],
          ),
          Row(
            children: [
              CustomButton('0'),
              CustomButton('backspace'),
            ],
          ),
        ],
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  final String text;

  CustomButton(this.text);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (text == 'backspace') {
          String currentText = CustomKeyboard.of(context)
              .controller
              .text;
          if (currentText.isNotEmpty) {
            CustomKeyboard.of(context)
                .controller
                .text = currentText.substring(0, currentText.length - 1);
          }
        } else {
          CustomKeyboard.of(context)
              .controller
              .text += text;
        }
      },
      child: Container(
        width: 100.0,
        height: 80.0,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey,
          ),
        ),
        child: Center(
          child: Text(text),
        ),
      ),
    );
  }
}

class CustomKeyboardController {
  final TextEditingController controller;

  CustomKeyboardController(this.controller);

  void clear() {
    controller.clear();
  }

  void close() {
    FocusScope.of(controller.context).requestFocus(FocusNode());
  }
}

class CustomKeyboardScope extends InheritedWidget {
  final CustomKeyboardController controller;

  CustomKeyboardScope({
    Key key,
    @required Widget child,
  })  : assert(child != null),
        controller = CustomKeyboardController(TextEditingController()),
        super(key: key, child: child);

  static CustomKeyboardController of(BuildContext context) {
    return (context.dependOnInheritedWidgetOfExactType<CustomKeyboardScope>())
        .controller;
  }

  @override
  bool updateShouldNotify(CustomKeyboardScope oldWidget) {
    return controller != oldWidget.controller;
  }
}

在上面的示例代码中，`CustomKeyboard` Widget是自定义键盘的主Widget，它包含了一个`TextField`和一些自定义的按钮。

`CustomButton` Widget是自定义键盘中的按键，它使用`GestureDetector`来处理按钮点击事件。

`CustomKeyboardController`是自定义键盘的控制器，用于控制输入框的文本内容。

最后，使用`CustomKeyboardScope` Widget来将`CustomKeyboardController`注入到自定义键盘中。

在需要使用自定义键盘的地方，可以使用以下代码来显示自定义键盘：

CustomKeyboardScope(
  child: CustomKeyboard(),
);

同时，需要将`CustomKeyboardController`与输入框关联起来，可以使用以下代码：

TextField(
  controller: CustomKeyboardScope.of(context).controller.textEditingController,
  focusNode: FocusNode(),
);