Flutter設置密碼輸入框

用getx實現(xiàn)的設置密碼輸入框飞盆,含二次確認邏輯
也可以不用getx實現(xiàn)滑燃,_buildNumberWidget就是輸入框部分

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

class NewsPage2 extends GetView {

  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _textNode = FocusNode();
  final _resultDataNew = ''.obs;
  final _resultDataAgain = ''.obs;
  final _isAgain = false.obs;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
      ),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 60, width: MediaQuery.sizeOf(context).width),
        Text(
          '設置支付密碼',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(height: 8),
        Obx(() {
          return Text(
            _isAgain.value == true ? '請再次填寫以確認' : '請設置密碼,用于支付驗證',
            style: TextStyle(
              fontSize: 15,
            ),
          );
        }),
        Offstage(
          offstage: true,
          child: TextField(
            controller: _textEditingController,
            focusNode: _textNode,
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(6),
              FilteringTextInputFormatter.digitsOnly
            ],
            onChanged: (value) {
              // 再次填寫
              if (_isAgain.value == true) {
                _resultDataAgain.value = value;
                // 再次填寫完成
                if (value.length == 6) {
                  _isAgain.value = false;
                  _textEditingController.clear();
                  if (_resultDataNew.value == _resultDataAgain.value) {
                    // 接口校驗
                    _showDialog(context, '接口校驗');
                  } else {
                    // 兩次密碼輸入不一致
                    _resultDataNew.value = '';
                    _resultDataAgain.value = '';
                    _showDialog(context, '兩次密碼輸入不一致');
                  }
                }
              } else {
                // 首次填寫
                _resultDataNew.value = value;
                // 首次填寫完成
                if (value.length == 6) {
                  _isAgain.value = true;
                  _textEditingController.clear();
                }
              }
            },
          ),
        ),
        SizedBox(height: 60),
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            _textNode.requestFocus();
          },
          child: Obx(() {
            if (_isAgain.value == true) {
              return _buildNumberWidget(_resultDataAgain.value.length);
            } else {
              return _buildNumberWidget(_resultDataNew.value.length);
            }
          }),
        ),
      ],
    );
  }

  Widget _buildNumberWidget(int length) {
    return Container(
      height: 47,
      width: 282,
      child: ListView.builder(
        padding: EdgeInsets.zero,
        scrollDirection: Axis.horizontal,
        physics: NeverScrollableScrollPhysics(),
        itemCount: 6,
        itemExtent: 47,
        itemBuilder: (BuildContext context, int index) {
          bool showPoint = index < length;
          return _buildNumberItemWidget(index, showPoint);
        },
      ),
    );
  }

  Widget _buildNumberItemWidget(int index, bool showPoint) {
    // 設置四周圓角 角度
    BorderRadiusGeometry borderRadius = BorderRadius.only();
    // 設置四周邊框
    Color color = Colors.black12;
    BorderSide borderSide0 = BorderSide(width: 0, color: color);
    BorderSide borderSide05 = BorderSide(width: 0.5, color: color);
    BoxBorder border = Border(top: borderSide05, left: borderSide05, bottom: borderSide05, right: borderSide0);
    if (index == 0) {
      borderRadius = BorderRadius.only(
        topLeft: Radius.circular(4),
        bottomLeft: Radius.circular(4),
      );
      border = Border(top: borderSide05, left: borderSide05, bottom: borderSide05, right: borderSide0);
    } else if (index == 5) {
      borderRadius = BorderRadius.only(
        topRight: Radius.circular(4),
        bottomRight: Radius.circular(4),
      );
      border = Border.all(width: 0.5, color: color);
    }
    return Container(
      height: 47,
      width: 47,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: borderRadius,
        border: border,
      ),
      child: showPoint
          ? Container(
        height: 10,
        width: 10,
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(5),
        ),
      )
          : Container(),
    );
  }

  void _showDialog(BuildContext context, String message) {
    showDialog(context: context, builder: (context) {
      return Center(
        child: Container(
          height: 50,
          width: 100,
          color: Colors.white,
          child: Text(
                message,
                style: TextStyle(
                  decoration: TextDecoration.none,
                  color: Colors.black,
                  fontSize: 15,
                ),
              ),
            ),
          );
    });
  }
}

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疆液,一起剝皮案震驚了整個濱河市一铅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌堕油,老刑警劉巖潘飘,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肮之,死亡現(xiàn)場離奇詭異,居然都是意外死亡卜录,警方通過查閱死者的電腦和手機戈擒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來艰毒,“玉大人筐高,你說我怎么就攤上這事〕笄疲” “怎么了柑土?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長绊汹。 經(jīng)常有香客問我稽屏,道長,這世上最難降的妖魔是什么西乖? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任狐榔,我火速辦了婚禮,結果婚禮上获雕,老公的妹妹穿的比我還像新娘薄腻。我一直安慰自己,他們只是感情好典鸡,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布被廓。 她就那樣靜靜地躺著,像睡著了一般萝玷。 火紅的嫁衣襯著肌膚如雪嫁乘。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天球碉,我揣著相機與錄音蜓斧,去河邊找鬼。 笑死睁冬,一個胖子當著我的面吹牛挎春,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播豆拨,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼直奋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了施禾?” 一聲冷哼從身側響起脚线,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎弥搞,沒想到半個月后邮绿,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渠旁,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年船逮,在試婚紗的時候發(fā)現(xiàn)自己被綠了顾腊。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡挖胃,死狀恐怖杂靶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情冠骄,我是刑警寧澤伪煤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站凛辣,受9級特大地震影響抱既,放射性物質發(fā)生泄漏。R本人自食惡果不足惜扁誓,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一防泵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蝗敢,春花似錦捷泞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至讶泰,卻和暖如春咏瑟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背痪署。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工码泞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人狼犯。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓余寥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親悯森。 傳聞我的和親對象是個殘疾皇子宋舷,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容