Flutter-TextField实际开发问题

1,332 阅读1分钟

Row中使用TextField需用Expanded包裹,如下:

                  Row(
                      children: [
                        Text("+86",style: TextStyle(fontSize: MediaQueryUtil.px2f(34),color: ColorUtils.font24,decoration: TextDecoration.none)),
                        VerticalDivider(
                          thickness: 2,
                          color: ColorUtils.font24,
                          indent: MediaQueryUtil.px2f(25),
                          endIndent: MediaQueryUtil.px2f(25),
                        ),
                        Expanded(
                          child:TextField(
                            controller: textController,
                            inputFormatters:[WhitelistingTextInputFormatter.digitsOnly,LengthLimitingTextInputFormatter(11)],//只允许输入数字
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "请输入手机号码"
                            ),
                          ),
                        )
                      ],
                    )

TextField限制字符输入

WhitelistingTextInputFormatter.digitsOnly 限制输入数字
LengthLimitingTextInputFormatter(11) 最大长度
直接使用maxLength会在右下角生成最大数字占用控件大小

		TextField(
                            controller: textController,
                            inputFormatters:[WhitelistingTextInputFormatter.digitsOnly,LengthLimitingTextInputFormatter(11)],
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "请输入手机号码"
                            ),
                          )

.....记录一下以后更新