flutter 自定义微信/支付宝密码输入框

逃离我推掉我的手 2021-08-27 15:08 1013阅读 0赞

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
项目需求需要实现以上效果

#### 思路解析： ####

1 可以用dialog来实现  
2 可以用一个新statfulWidget实现

因为不大熟悉dialog，故用了一个新的`statefulWidget`来实现页面效果，直接上代码：

///
    /// 功能：
    /// 描述：设置密码弹框功能
    /// crated by xudailong on 2020/3/10.
    ///
    class MineDestorySetPwdPage extends StatefulWidget { 
      @override
      _MineDestorySetPwdPageState createState() => _MineDestorySetPwdPageState();
    }
    
    class _MineDestorySetPwdPageState extends State<MineDestorySetPwdPage> { 
    
      String pwdData = '';
    
      final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
    
      bool showError = false;
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          backgroundColor: Colors.transparent, //把scaffold的背景色改成透明
          body: Container(
            color: MyColor.lightColor,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            alignment: Alignment.bottomLeft,
            child: Column(
              children: <Widget>[
    
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 150,
                ),
                Container(
                  height: 180,
                  width: 300,
                  child: Column(
                    children: <Widget>[
                      GestureDetector(
                        child: Container(
                          alignment: Alignment.topRight,
                          child: Image.asset(ImageUtil.getLocalPath(ImageConstant.icon_pass_close),width: 10,height: 10,),
                          padding: EdgeInsets.only(right:MyDimen.baseRight,top: MyDimen.baseLeft ),
                        ),
                        onTap: (){ 
                          Navigator.of(context).pop();
                        },
                        behavior: HitTestBehavior.opaque,
                      ),
                      Container(
                        child: Text('请输入账户密码',style: TextStyle(fontSize: MyDimen.dp14,color: MyColor.norFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w600),),
                      ),
                      Container(
                        height: 50,
                        width: 250,
                        margin: EdgeInsets.only(top: MyDimen.dp30),
                        child:  CustomJPasswordField(pwdData),
                      ),
                      Container(
                        padding: EdgeInsets.only(left: MyDimen.baseLeft,right: MyDimen.baseRight,top: MyDimen.dp20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            showError?Text('您输入的密码有误',style: TextStyle(fontSize: MyDimen.dp12,color: MyColor.redNumFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w500),):Container(),
                            GestureDetector(
                              child: Text('忘记密码',style: TextStyle(fontSize: MyDimen.dp12,color: MyColor.norFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w500),),
                              onTap: (){ 
                                RouteUtil.jump2AccountPwd(context);
                              },
                              behavior: HitTestBehavior.opaque,
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                  decoration: BoxDecoration(
                      color: MyColor.bg_white,
                      borderRadius: BorderRadius.all(Radius.circular(10))
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(),
                ),
                Align(
                  child: Container(
                    height: 200,
                    width: MediaQuery.of(context).size.width,
                    color: MyColor.bg_white,
                    alignment: Alignment.bottomCenter,
                    child: MyKeyboard(_onKeyDown),
                  ),
                  alignment: Alignment.bottomCenter,
                )
              ],
            ),
          ),
        );
      }

欢迎阅读：`免费搭建个人博客：https://blog.csdn.net/xudailong_blog/article/details/78762262`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/030c7267464f4041a419248f41c058d3.png