Flutter密码登录

2020-06-15  本文已影响0人  _xiangpan

刚开始做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;
                });
              })

        ],
      ),
    );
  }


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

上一篇 下一篇

猜你喜欢

热点阅读