登录 注册写文章 首页下载APP

Flutter自定义支付键盘

土逗牛肉关注赞赏支持

Flutter自定义支付键盘

介绍

自定义支付键盘

keyboard.gif

安装教程

1. clone工程
2. 复制工程下的keyboard目录到自己的项目
3. 添加如下代码：

import 'keyboard/view_keyboard.dart';

  void _showKeyboard() {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (builder) {
        return CustomKeyboard(
          keyHeight: 46,
          autoBack: false,
          pwdLength: 6,
          onKeyDown: (keyEvent) {
            if (keyEvent.isClose()) {
              Navigator.pop(context);
            }
            debugPrint(keyEvent.key);
          },
          onResult: (data) {
            BotToast.showText(text: "密码：$data");
          },
        );
      },
    );
  }

• 注意事项：
  1、用showModalBottomSheet打开键盘，isScrollControlled值必须为true,当为false时自生高度被限制，具体看源码，
  2、backgroundColor: Colors.transparent,需给showModalBottomSheet设置背景透明

CustomKeyboard参数说明

序号	参数	说明
1	keyHeight	每个按键的高度，默认48
2	pwdLength	密码长度，默认为6位数
3	autoBack	自动返回，如果为true,则输入为pwdLehgth长度后自动触发onResult 返回输入值
4	onKeyDown	点击每个数字键以及关闭按钮的回调方法，用keyEvent.key接收键值，keyEvent.isClose判断是否触发关闭按钮
5	onResult	点击确定或者autoBack为true，输入完成后触发回调，返回输入结果

• github地址：
  代码来啦Github传送门 喜欢的话，麻烦点点star哦！

• 参考项目：
  juejin.cn/post/684490…

推荐阅读更多精彩内容

• C# 常用控件及单击事件 1、窗体 1、常用属性 （1）Name属性：用来获取或设置窗体的名称，在应用程序中可通过Name属性来引用窗体。 ... Moment__格调阅读 1,747评论 0 赞 8
• 面包时间 2017.02.22 可以练习，每当这个时候，脑袋就犯困，我这脑袋真是神奇呀，一说让你做事情，你就犯困，你可不要太... Carden阅读 282评论 0 赞 0
• 即将热播的电视剧～三生三世枕上书…… 《三生三世枕上书》迪丽热巴、高伟光 《三生三世枕上书》作为《三生三世十里桃花》的姐妹篇观众已经期待两年了，由迪丽热... LoTSo草莓梨阅读 43评论 0 赞 1
• 两首好玩的童诗 朋友说她最近几个月一直处于游离状态，东西写不下去，做什么都懒懒的，不想动脑，不想动手，甚至想动一下，脑子也不转了，... 简书蒲公英阅读 156评论 2 赞 3
• 大鱼海棠 刚刚看完《大鱼海棠》，内心很复杂。也许什么都比别人晚一点，中国2016年就上映这么唯美这么棒的中国风动... 倾听之雨阅读 67评论 0 赞 1

评论0 赞3 3赞4赞 赞赏