Flutter设置密码输入框

用getx实现的设置密码输入框,含二次确认逻辑
也可以不用getx实现,_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,
                ),
              ),
            ),
          );
    });
  }
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容