Flutter键盘管理插件couchkeys的使用

一个用于Flutter应用程序的可定制虚拟键盘包，专为在智能电视和机顶盒等设备上使用D-pad导航而设计。

灵感来自Android TV上的YouTube应用。

功能

• 完全可自定义的键盘布局
• 可自定义按键外观和行为
• 与Flutter TextFields轻松集成

开始使用

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  couchkeys: ^1.0.0

然后运行：

flutter pub get

使用示例

import 'package:couchkeys/couchkeys.dart';

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个控制器以供Couchkeys和TextField共同使用
  final controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            width: 500,
            // 创建Couchkeys组件
            child: Couchkeys(
              keyboardHeight: 200,
              controller: controller,
            )
          ),
          // 创建TextField组件并用控制器显示输入值
          TextField(controller: controller),
        ]
      )
    );
  }
}

完整示例代码

// 构建一个自定义的Couchkeys数字键盘

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

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

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

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

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> {
  final controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 24.0, horizontal: 512),
            child: TextField(
              controller: controller,
              decoration: const InputDecoration(
                hintText: "搜索...",
                border: OutlineInputBorder(),
              ),
            ),
          ),
          SizedBox(
            width: 200,
            child: Couchkeys(
              keyboardHeight: 200,
              controller: controller,
              customLayout: [
                ["1", "2", "3", "-"]
                    .map(
                      (v) => KeyboardKey(
                        action: InsertAction(v),
                        child: Text(v),
                      ),
                    )
                    .toList(),
                ["4", "5", "6"]
                    .map((v) => KeyboardKey(
                          action: InsertAction(v),
                          child: Text(v),
                        ))
                    .followedBy(
                  [
                    KeyboardKey(
                      action: SpaceAction(),
                      child: const Icon(Icons.space_bar),
                    )
                  ],
                ).toList(),
                ["7", "8", "9"]
                    .map((v) => KeyboardKey(
                          action: InsertAction(v),
                          child: Text(v),
                        ))
                    .followedBy(
                  [
                    KeyboardKey(
                      action: BackspaceAction(),
                      child: const Icon(Icons.backspace),
                    )
                  ],
                ).toList(),
                [".", "0", ","]
                    .map((v) => KeyboardKey(
                          action: InsertAction(v),
                          child: Text(v),
                        ))
                    .followedBy(
                  [
                    KeyboardKey(
                      child: const Icon(Icons.keyboard_return),
                      onTap: (_) {
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(
                            content: Text("提交: ${controller.text}"),
                          ),
                        );
                      },
                    )
                  ],
                ).toList(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}