2. 程式人生 > >Flutter仿微信，支付寶密碼輸入框+自定義鍵盤

Flutter仿微信，支付寶密碼輸入框+自定義鍵盤

阿新 • • 發佈：2018-12-13

大家好，我又來了。 今年這個冬天真的是“寒冬”啊，我是真的被“凍傷”了，一年的計劃全部被打算了，賊無奈，也讓我遭受了一定的打擊，希望之光在哪？（吐槽到此為止） 回到咱們的正題，剛用Flutter做完一個金融專案，當中使用到了類似於微信，和支付寶的那種密碼輸入框，然後為了安全一點也自己實現了自定義的鍵盤，今天跟大家分享一波

效果展示

效果如下圖所示：

Flutter自定義密碼——鍵盤.jpg

當中的佈局形式，大家可根據自己的具體需求來調整就好了，我這裡寫的demo是這樣的佈局，這個調整起來很簡單（本來想弄成gif的，然而不會。。。）。

分析一波

我們分析下這個東東，首先我們需要自定義好這個密碼輸入框，當我們在輸入一個密碼的時候，密碼輸入框就填充一位 ，這個過程其實我們自己把它繪製出來就好：

  1. 先繪製六個密碼框
  2. 接受呼叫者傳過來的密碼，根據密碼長度來繪製密碼框的填充個數

輸入框實現

///  自定義 密碼輸入框 第一步 —— 使用畫筆畫出單個的框
class CustomJPasswordField extends StatelessWidget {

  ///  傳入當前密碼
 String data;
  CustomJPasswordField(this.data);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyCustom(data),
    );
  }
}

  ///  繼承CustomPainter ，來實現自定義圖形繪製
class MyCustom extends CustomPainter {

  ///  傳入的密碼，通過其長度來繪製圓點
  String pwd
 
Length;
  MyCustom(this.pwdLength);

   ///  此處Sizes是指使用該類的父佈局大小
  @override
  void paint(Canvas canvas, Size size) {

    // 密碼畫筆
  Paint mPwdPaint;
    Paint mRectPaint;

    // 初始化密碼畫筆  
    mPwdPaint = new Paint();
    mPwdPaint..color = Colors.black;

//   mPwdPaint.setAntiAlias(true);
    // 初始化密碼框  
    mRectPaint = new Paint();
    mRectPaint..color = Color(0xff707070);

   ///  圓角矩形的繪製
    RRect r = new RRect.fromLTRBR(
        0.0, 0.0, size.width, size.height, new Radius.circular(size.height / 12));
   ///  畫筆的風格
    mRectPaint.style = PaintingStyle.stroke;
    canvas.drawRRect(r, mRectPaint);

   ///  將其分成六個 格子（六位支付密碼）
    var per = size.width / 6.0;
    var offsetX = per;
    while
 
 (offsetX < size.width) {
      canvas.drawLine(
          new Offset(offsetX, 0.0), new Offset(offsetX, size.height), mRectPaint);
      offsetX += per;
    }
 
    ///  畫實心圓
    var half = per/2;
    var radio = per/8;
    mPwdPaint.style = PaintingStyle.fill;
    ///  當前有幾位密碼，畫幾個實心圓
    for(int i =0; i< pwdLength.length && i< 6; i++){
      canvas.drawArc(new Rect.fromLTRB(i*per+half-radio, size.height/2-radio, i*per+half+radio, size.height/2+radio), 0.0, 2*pi, true, mPwdPaint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
複製程式碼

自定義鍵盤

到這裡為止，我們就寫完了我們第一個重頭，自定義的密碼輸入框，然後第二步，實現自定義密碼鍵盤，密碼鍵盤也可以通過完全自定義繪製出來，但是我這裡用的一種比較簡單的實現方式，直接使用多個按鈕組裝成一個鍵盤，

自定義鍵盤.png

這個鍵盤其實就是12個相同樣式的按鈕組成，只是各自的文字內容不同，因此我們首先可以定義好一個公共的按鈕樣式，然後我們在其中通過回撥的方式來將點選事件拋給呼叫者定義，

import 'package:flutter/material.dart';

///  自定義 鍵盤 按鈕
class CustomKbBtn extends StatefulWidget {
///  按鈕顯示的文字內容
  String text;

  CustomKbBtn({Key key, this.text, this.callback}) : super(key: key);
 ///  按鈕 點選事件的回撥函式
  final callback;
  @override
  State<StatefulWidget> createState() {
    return ButtonState();
  }
}

class ButtonState extends State<CustomKbBtn> {
  ///回撥函式執行體
  var backMethod;

  void back() {
    widget.callback('$backMethod');
  }

  @override
  Widget build(BuildContext context) {

 /// 獲取當前螢幕的總寬度，從而得出單個按鈕的寬度
    MediaQueryData mediaQuery = MediaQuery.of(context);
    var _screenWidth = mediaQuery.size.width;

    return new Container(
        height:50.0,
        width: _screenWidth / 3,
        child: new OutlineButton(
          // 直角
          shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(0.0)),
          // 邊框顏色
          borderSide: new BorderSide(color: Color(0x10333333)),
          child: new Text(
            widget.text,
            style: new TextStyle(color: Color(0xff333333), fontSize: 20.0),
          ),
         // 按鈕點選事件
          onPressed: back,
        ));
  }
}
複製程式碼

自定義鍵盤程式碼實現

有了按鈕之後，我們就將它拼裝成一個完整的鍵盤：


/// 自定義密碼 鍵盤

class MyKeyboard extends StatefulWidget {
  final callback;

  MyKeyboard(this.callback);

  @override
  State<StatefulWidget> createState() {
    return new MyKeyboardStat();
  }
}

class MyKeyboardStat extends State<MyKeyboard> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  /// 定義 確定 按鈕 介面  暴露給呼叫方
  ///回撥函式執行體
  var backMethod;
  void onCommitChange() {
    widget.callback(new KeyEvent("commit"));
  }

  void onOneChange(BuildContext cont) {
    widget.callback(new KeyEvent("1"));
  }

  void onTwoChange(BuildContext cont) {
    widget.callback(new KeyEvent("2"));
  }

  void onThreeChange(BuildContext cont) {
    widget.callback(new KeyEvent("3"));
  }

  void onFourChange(BuildContext cont) {
    widget.callback(new KeyEvent("4"));
  }

  void onFiveChange(BuildContext cont) {
    widget.callback(new KeyEvent("5"));
  }

  void onSixChange(BuildContext cont) {
    widget.callback(new KeyEvent("6"));
  }

  void onSevenChange(BuildContext cont) {
    widget.callback(new KeyEvent("7"));
  }

  void onEightChange(BuildContext cont) {
    widget.callback(new KeyEvent("8"));
  }

  void onNineChange(BuildContext cont) {
    widget.callback(new KeyEvent("9"));
  }

  void onZeroChange(BuildContext cont) {
    widget.callback(new KeyEvent("0"));
  }

  /// 點選刪除
  void onDeleteChange() {
    widget.callback(new KeyEvent("del"));
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      key: _scaffoldKey,
      width: double.infinity,
      height: 250.0,
      color: Colors.white,
      child: new Column(
        children: <Widget>[
          new Container(
            height:30.0,
            color: Colors.white,
            alignment: Alignment.center,
            child: new Text(
              '下滑隱藏',
              style: new TextStyle(fontSize: 12.0, color: Color(0xff999999)),
            ),
          ),

          ///  鍵盤主體
          new Column(
            children: <Widget>[
              ///  第一行
              new Row(
                children: <Widget>[
                  CustomKbBtn(
                      text: '1', callback: (val) => onOneChange(context)),
                  CustomKbBtn(
                      text: '2', callback: (val) => onTwoChange(context)),
                  CustomKbBtn(
                      text: '3', callback: (val) => onThreeChange(context)),
                ],
              ),

              ///  第二行
              new Row(
                children: <Widget>[
                  CustomKbBtn(
                      text: '4', callback: (val) => onFourChange(context)),
                  CustomKbBtn(
                      text: '5', callback: (val) => onFiveChange(context)),
                  CustomKbBtn(
                      text: '6', callback: (val) => onSixChange(context)),
                ],
              ),

              ///  第三行
              new Row(
                children: <Widget>[
                  CustomKbBtn(
                      text: '7', callback: (val) => onSevenChange(context)),
                  CustomKbBtn(
                      text: '8', callback: (val) => onEightChange(context)),
                  CustomKbBtn(
                      text: '9', callback: (val) => onNineChange(context)),
                ],
              ),

              ///  第四行
              new Row(
                children: <Widget>[
                  CustomKbBtn(text: '刪除', callback: (val) => onDeleteChange()),
                  CustomKbBtn(
                      text: '0', callback: (val) => onZeroChange(context)),
                  CustomKbBtn(text: '確定', callback: (val) => onCommitChange()),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}

複製程式碼

這裡的回撥函式，其實是將所有的按鈕事件處理交給呼叫者自己去處理， 這裡就引出了程式碼中的KeyEvent()這個類，我們看看這個類的實現

///  支符密碼  用於 密碼輸入框和鍵盤之間進行通訊
class KeyEvent {
 ///  當前點選的按鈕所代表的值
  String key;
  KeyEvent(this.key);

  bool isDelete() => this.key == "del";
  bool isCommit() => this.key == "commit";
}
複製程式碼

這個類實際上只是拿到了按鈕最終代表的實際內容，然後呼叫者可以根據這個key的值來判斷當前點選的是 數字按鈕 還是說是 刪除按鈕 或者是 確定按鈕，以此來進行密碼的修改，。

到這裡為止，所有的內容基本都準備好了，接下來就是使用了： 這裡得注意一個點，密碼鍵盤是從螢幕的最下方彈出來的，這裡我使用到了Flutter的showBottomSheet，這個是一個官方的widget,通過這個來實現鍵盤的彈出。

直接上程式碼吧

/// 支付密碼  +  自定義鍵盤

class main_keyboard extends StatefulWidget {
  static final String sName = "enter";

  @override
  State<StatefulWidget> createState() {
    return new keyboardState();
  }
}


class keyboardState extends State<main_keyboard> {
 /// 使用者輸入的密碼
  String pwdData = '';

 /*
    GlobalKey：整個應用程式中唯一的鍵
    ScaffoldState：Scaffold框架的狀態
    解釋：_scaffoldKey的值是Scaffold框架狀態的唯一鍵
   */
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  // VoidCallback：沒有引數並且不返回資料的回撥
  VoidCallback _showBottomSheetCallback;

  @override
  void initState() {

    _showBottomSheetCallback = _showBottomSheet;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      body: _buildContent(context),
    );
  }

  Widget _buildContent(BuildContext c) {
    return new Container(
      width: double.maxFinite,
      height: 300.0,
      color: Color(0xffffffff),
      child: new Column(
        children: <Widget>[

          new Padding(
            padding: const EdgeInsets.only(top: 50.0),
            child: new Text(
              '請在此輸入新支付密碼',
              style: new TextStyle(fontSize: 18.0, color: Color(0xff333333)),
            ),
          ),

          ///密碼框
          new Padding(
            padding: const EdgeInsets.only(top: 15.0),
            child: _buildPwd(pwdData),
          ),
        ],
      ),
    );
  }

  /// 密碼鍵盤 確認按鈕 事件
  void onAffirmButton() {

  }

/// 密碼鍵盤的整體回撥，根據不同的按鈕事件來進行相應的邏輯實現
  void _onKeyDown(KeyEvent data){
// 如果點選了刪除按鈕，則將密碼進行修改
    if (data.isDelete()) {
      if (pwdData.length > 0) {
        pwdData = pwdData.substring(0, pwdData.length - 1);
        setState(() {});
      }
    } 
// 點選了確定按鈕時
else if (data.isCommit()) {
      if (pwdData.length != 6) {
//        Fluttertoast.showToast(msg: "密碼不足6位，請重試", gravity: ToastGravity.CENTER);
        return;
      }
      onAffirmButton();
    } 
//點選了數字按鈕時  將密碼進行完整的拼接
else {
      if (pwdData.length < 6) {
        pwdData += data.key;
      }
      setState(() {});
    }
  }
  /// 底部彈出 自定義鍵盤  下滑消失
  void _showBottomSheet() {
    setState(() {
      // disable the button  // 禁用按鈕
      _showBottomSheetCallback = null;
    });

 /*
      currentState：獲取具有此全域性鍵的樹中的控制元件狀態
      showBottomSheet：顯示永續性的質感設計底部面板
      解釋：聯絡上文，_scaffoldKey是Scaffold框架狀態的唯一鍵，因此程式碼大意為，
           在Scaffold框架中顯示永續性的質感設計底部面板
     */
    _scaffoldKey.currentState
        .showBottomSheet<void>((BuildContext context) {
     /// 將自定義的密碼鍵盤作為其child   這裡將回調函式傳入
      return new MyKeyboard(_onKeyDown);
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          // re-enable the button  // 重新啟用按鈕
          _showBottomSheetCallback = _showBottomSheet;
        });
      }
    });
  }

/// 構建 密碼輸入框  定義了其寬度和高度
  Widget _buildPwd(var pwd) {
    return new GestureDetector(
      child: new Container(
        width: 250.0,
        height:40.0,
//      color: Colors.white,  自定義密碼輸入框的使用
        child: new CustomJPasswordField(pwd),
      ),
// 使用者點選輸入框的時候，彈出自定義的鍵盤
      onTap: () {
        _showBottomSheetCallback();
      },
    );
  }
}

複製程式碼

大功告成，這個時候我們就實現了想要的效果啦。 回想了下我寫的部落格，基本都是程式碼偏多，我把該有的說明都在程式碼中寫成註釋了，我覺得這樣更加的直觀，希望各位喜歡這種方式，如果本文幫助到了你，希望你能點點喜歡，給我一點點鼓勵，每次看到有人評論和點了喜歡，都會很開心，哈哈。要是能點點關注就更好了。

有啥問題歡迎及時聯絡我，我們下次再見啦！

相關推薦

Flutter仿微信，支付寶密碼輸入框+自定義鍵盤

大家好，我又來了。 今年這個冬天真的是“寒冬”啊，我是真的被“凍傷”了，一年的計劃全部被打算了，賊無奈，也讓我遭受了一定的打擊，希望之光在哪？（吐槽到此為止） 回到咱們的正題，剛用Flutter做完一個金融專案，當中使用到了類似於微信，和支付寶的那種密碼輸入框，然後為了安全一點也自己實現了自定義的鍵盤，今天跟

Android仿支付寶密碼輸入框(自定義數字鍵盤)

1.概述          Android自定義密碼輸入框，通過自定義輸入顯示框和自定義輸入鍵盤，實現仿支付寶數字鍵盤等。程式碼已託管到github，有需要的話可以去我的github下載。 可以自定義關閉圖示、文字內容、顏色、大小，彈框樣

android 仿微信、支付寶支付密碼框效果

  GitHub:https://github.com/Jungerr/GridPasswordView 新增依賴： compile 'com.jungly:gridPasswordView:

仿微信、支付寶等簡潔的驗證碼、密碼輸入框。

簡潔驗證碼輸入框，能自定義輸入框個數和樣式。How to use<com.dalimao.corelibrary.VerificationCodeInput android:layout_width="wrap_content" android:layout_height

h5仿微信、支付寶數字鍵盤|微信支付鍵盤|支付寶付款鍵盤

html5仿微信支付數字鍵盤|仿支付寶鍵盤|h5仿微信密碼輸入鍵盤|自定義數字鍵盤 很早之前由於專案需求，就有開發過一個h5仿微信支付鍵盤，這幾天就把之前的數字鍵盤模組獨立出來，重新整理開發成demo，採用h5+原生js開發，含有微信、支付寶兩種鍵盤面板，可自定義普通鍵盤、最大值輸入限制、密碼鍵盤/電話號碼

微信，支付寶，收款二維碼實時生成訂單監控，免籤支,付支付系統，個人收款,收款二維碼

微信，支付寶，收款二維碼實時生成訂單監控，免籤支,付支付系統，個人收款,收款二維碼 微信和支付寶個人支付二維碼生成與監控！有PHP介面回撥，個人收款好助手！ 實現收款即時到個人微信或支付寶賬戶！方便安全。 這個APP的作用是對自己的網站或者任何業務進行搭建支付系統！可以把錢收到自

使用TCP協議完成Xposed hook個人免籤支付系統，支援qq，微信，支付寶二維碼實時生成

由於之前思路使用natapp對映，但是個人是個比較愛折騰的人，覺得配置域名比較麻煩，於是就大致對整個系統思考了下，準備把APP承擔的服務端職責抽離出來，大致以下倆個思路 1、APP和服務端不進行TCP連結，而是使用一種比較迂迴的方法，作為使用者端不再去請求APP拿二維碼資料

微信，支付寶，收款二維碼實時生成，訂單監控，免籤支,付支付系統，個人收款,收款二維碼

微信，支付寶，收款二維碼實時生成，訂單監控，免籤支,付支付系統，個人收款,收款二維碼 微信和支付寶個人支付二維碼生成與監控！有JAVA介面回撥，個人收款好助手！ 實現收款即時到個人微信或支付寶賬戶！方便安全。 這個APP的作用是對自己的網站或者任何業務進行搭建支付系統！可以把錢收

quick cocos2dx 新增wap 跳轉微信，支付寶

修改 Cocos2dxWebView，在shouldOverrideUrlLoading 裡新增 try { if(urlString.startsWith("weixin://") || urlString.startsWith("alipays://"

通過lua指令碼識別微信，支付寶，龍支付

需求：微信，支付寶，龍支付的APP中的掃一掃掃描二維碼，根據不同的瀏覽器，調起不同的支付。這裡要通過lua指令碼識別掃碼之後支付型別。 lua指令碼判斷支付型別，要知道各種支付的標誌性欄位，比如微信，

微信，支付寶，百度錢包三種APP支付成功關閉瀏覽器

下面是三種移動app的關閉方式： ? 1 2 3 WeixinJSBridge.call('closeWindow');//微信 AlipayJSBridge.call('closeWebview'); //支付寶 BLightApp.closeWindo

小程式多端差異調研報告(微信，支付寶，頭條，QQ)

已經使用uni-app開發併發布了一個跨端小程式啦，嘻嘻嘻！

Android仿微信朋友圈九宮格圖片展示自定義控制元件，支援縮放動畫~

一直對微信朋友圈九宮格圖片顯示控制元件比較好奇，找到一篇介紹相關騷操作的部落格 部落格雖好但是不夠完美，缺少點選圖片預覽頁面和縮放動畫，作為一個不斷追求完美主義的人，我想把這個控制元件結合到專案中而不是單純作為一個控制元件。 下面是我的實現效果圖： （

【Android 仿微信通訊錄 導航分組列表-下】自定義View為RecyclerView打造右側索引導航欄IndexBar

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 一 概述 在上篇文章（http://blog.csdn.net/zxt0601/article/details/52355199）裡，我們用ItemDecoration為Recy

Android 高仿微信頭像擷取 打造不一樣的自定義控制元件

轉載請表明出處：http://blog.csdn.net/lmj623565791/article/details/39761281，本文出自：【張鴻洋的部落格】1、概述前面已經寫了關於檢測手勢識別的文章，如果不瞭解可以參考：Android 手勢檢測實戰 打造支援縮放平移的圖

手機丟了，微信、支付寶綁了銀行卡，第一時間該怎麽辦？

運營 電信詐騙 cto 朋友圈 找我 col 聯通 激活 管理器 網友一： 手機丟了之後，大多數人的第一反應是驚慌，被偷的手機很多時候只是被拿去賣錢了，相比電信詐騙，手機丟失造成巨額損失的並不多見，冷靜下來，按照流程來就好了。 要先明確的一件事是你發現自己手機丟失可能是幾分

2019年起微信和支付寶都必須執行的新規定，你知道嗎？

央行對移動支付宣佈了一個新規定：表明凡是使用微信支付和支付寶支付的第三方支付軟體，每筆交易額超過5萬的，必須寫一份報告說明提交平臺，而且這個規定從2019年1月1日就開始實行了。 眾多網友表示以後有了大的交易額就很麻煩，但是針對先在猖獗的手機詐騙行為，小編覺得這個規定給財產安全帶了了一定的保障。

DISCUZ論壇積分充值和VIP購買二合一的支付外掛，支援微信和支付寶

分享給大家一個DISCUZ論壇積分充值和VIP購買二合一的支付外掛，支援微信和支付寶2種付款方式，電腦和手機都行，方便簡單，手機版可以直接喚醒支付寶，更平常用手機淘寶買東西一樣簡單，再也不用輸入支付寶帳號了。具體我不多說，大家可以去演示網站試試。演示網站：點選進入演示網站下

原始碼推薦(6.16)：高仿新浪微博，支付寶（高仿）原始碼

模仿新浪微博做的一款app，有傳送博文，評論，點贊，私聊功能（修復了滑動會卡的bug） 使用到的第三方庫： AVOSCloud AVOSCloudIM JSBadgeView fmdb MBProgressHUD SDWebImage MessageDisplayKit

微信和支付寶支付模式詳解及實現二

配置 其余 logs https 朋友 一個 target 多租戶 對比 　　繼上篇《微信和支付寶支付模式詳解及實現》到現在已經有半年時間了，這期間不少朋友在公號留言支付相關的問題，最近正好也在處理公司支付相關的對接，打算寫這篇來做一個更進一步的介紹，同時根據主要的幾個支付