flutter

Flutter输入框:TextField

银戒 · 5月9日 · 2019年 · · 380次已读

TextField

用来处理用户输入的值,类似html中的input输入框

查看设计material.io对TextField的设计详情

在new此空间时,活默认添加一个带有下划线的输入框,如图:

代码如下:

body: new Container(
        child: new ListView(
          padding: EdgeInsets.fromLTRB(50, 200, 50, 200),
          children: <Widget>[
            new TextField()
          ],
        ),
      ),

定制样式

obscureText:true(true类似于html中的密码输入框,false就是可见文本)

使用该控件的 decoration 可以定制输入框的样式。

  • border:边框
  • labelText:提示标签
  • focusedBorder:获取焦点之后的边框
  • errorBorder:错误之后的边框
  • helperText:输入框的的帮助信息,会显示在输入框的下面
  • hintText:提示内容,会显示在输入框中,当用户输入后就没了
  • counterText:显示在输入下方右边的内容
  • prefixText:输入框获取焦点后就会将该内容填充到输入框中

如:

new TextField(
                obscureText:true,
                decoration:InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(1, 1, 1, 1),
                  labelText: "Phone number",
                  border: OutlineInputBorder(),
                  focusedBorder: UnderlineInputBorder(),
                  hintText: "Please enter phone number",
                  counterText: "111",
                  prefixText: "sdadda",
                  semanticCounterText: "sass"
                )
            )

以上都是我一个一个试出来的,还有很多,大家可以去看文档

高质量技术QQ交流群,在这里,你的所有问题都会有答案:824144151(因为群里的人提倡和呼吁高调做人,低调行事,所以群名叫做中级质量技术交流群)

0 条回应