介紹
自定義支付鍵盤(pán)
keyboard.gif
安裝教程
- clone工程
- 復(fù)制工程下的keyboard目錄到自己的項(xiàng)目
- 添加如下代碼：
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");
},
);
},
);
}
- 注意事項(xiàng)：
1、用showModalBottomSheet打開(kāi)鍵盤(pán)，isScrollControlled值必須為true,當(dāng)為false時(shí)自生高度被限制，具體看源碼，
2、backgroundColor: Colors.transparent,需給showModalBottomSheet設(shè)置背景透明
CustomKeyboard參數(shù)說(shuō)明
| 序號(hào) | 參數(shù) | 說(shuō)明 |
|---|---|---|
| 1 | keyHeight | 每個(gè)按鍵的高度，默認(rèn)48 |
| 2 | pwdLength | 密碼長(zhǎng)度，默認(rèn)為6位數(shù) |
| 3 | autoBack | 自動(dòng)返回，如果為true,則輸入為pwdLehgth長(zhǎng)度后自動(dòng)觸發(fā)onResult 返回輸入值 |
| 4 | onKeyDown | 點(diǎn)擊每個(gè)數(shù)字鍵以及關(guān)閉按鈕的回調(diào)方法，用keyEvent.key接收鍵值，keyEvent.isClose判斷是否觸發(fā)關(guān)閉按鈕 |
| 5 | onResult | 點(diǎn)擊確定或者autoBack為true，輸入完成后觸發(fā)回調(diào)，返回輸入結(jié)果 |
github地址：
代碼來(lái)啦Github傳送門(mén) 喜歡的話(huà)，麻煩點(diǎn)點(diǎn)star哦！參考項(xiàng)目：
https://juejin.im/post/5c10ef31e51d452e2c698673
