Flutter密码登录

发表于 分类于

刚开始接触Flutter，记录遇到的坑

一、先上效果图

效果图

二、遇到问题

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

三、解决

1）在TextField 外面包裹Expanded

1
2
3
4
5
6
7
8
9
 Row(
     children: <Widget>[  
          Expanded(
            child: TextField(
                ......
            )
        )
    ]
)

2）输入限制

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

3）密码明文与密文显示

1
2
3
4
5
6
7
8
9
10
11
obscureText: !isCanSee //更改false/true
// 图标显示
 IconButton(
            iconSize: ScreenUtil().setHeight(20),
            icon: Image.asset(
                Utils.getImgPath(isCanSee?'see':"nosee")),
            onPressed: () {
              setState(() {
                isCanSee = !isCanSee;
              });
            })

4) 密码输入框完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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;
                });
              })

        ],
      ),
    );
  }

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

0%