美文网首页
Flutter密码登录

Flutter密码登录

作者: _xiangpan | 来源:发表于2020-06-15 16:06 被阅读0次

    刚开始做Flutter项目,记录遇到的坑


    一、先上效果图

    效果图

    二、遇到问题

     1、Row中不能直接添加TextField
     2、TextField 输入限制
     3、TextField 密码明文与密文显示
    

    三、解决

    1)在TextField 外面包裹Expanded

     Row(
         children: <Widget>[  
              Expanded(
                child: TextField(
                    ......
                )
            )
        ]
    )
    

    2)输入限制

       inputFormatters: [
             WhitelistingTextInputFormatter(RegExp("[^\u4e00-\u9fa5]")),
             LengthLimitingTextInputFormatter(16),],
    

    3)密码明文与密文显示

      obscureText: !isCanSee //更改false/true
      // 图标显示
       IconButton(
                  iconSize: ScreenUtil().setHeight(20),
                  icon: Image.asset(
                      Utils.getImgPath(isCanSee?'see':"nosee")),
                  onPressed: () {
                    setState(() {
                      isCanSee = !isCanSee;
                    });
                  })
    

    4) 密码输入框完整代码

    Widget buildPsw() {
        return Container(
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.only(left: ScreenUtil().setHeight(20)),
          height: ScreenUtil().setHeight(90),
          decoration: BoxDecoration(
              color: Colours.white,
              borderRadius: BorderRadius.circular(ScreenUtil().setHeight(60)),
              border: Border.all(color: Color(0xffffd300))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: TextField(
                    controller: pswEditer,
                    keyboardType: TextInputType.visiblePassword,
                    focusNode: _nodeText1,
                    maxLength: 16,
                    style: TextStyle(
                        fontSize: ScreenUtil().setSp(28), color: Colours.darkGray),
                    decoration: InputDecoration(
                      hintText: '请填写密码',
                      counterText: "",
                      hintStyle: TextStyle(color: Colours.gray),
                      border: InputBorder.none,
                      isDense: true,
                      contentPadding: EdgeInsets.zero,
                    ),
                    inputFormatters: [
                      WhitelistingTextInputFormatter(
                          RegExp("[^\u4e00-\u9fa5]")),
                      LengthLimitingTextInputFormatter(16),
                    ],
                    obscureText: !isCanSee),
              ),
              IconButton(
                  iconSize: ScreenUtil().setHeight(20),
                  icon: Image.asset(
                      Utils.getImgPath(isCanSee?'see':"nosee")),
                  onPressed: () {
                    setState(() {
                      isCanSee = !isCanSee;
                    });
                  })
    
            ],
          ),
        );
      }
    
    

    如有意见和建议,及时沟通。

    相关文章

      网友评论

          本文标题:Flutter密码登录

          本文链接:https://www.haomeiwen.com/subject/xkqhxktx.html