Flutter 表单组件

TextField

TextField(
          controller: _userName,

          //设置最大支持行数
          maxLines: 3,

          //设置最大支持长度(会在右下角显示字的个数)
          maxLength: 300,

          //设置为true时,变为密码框 注意: 设置为密码显示时,最大行数必须置为1
		  //obscureText: true,

          //监听文本变化
          onChanged: (value) {
            setState(() {
              _userName.text = value;
            });
          },

          decoration: InputDecoration(
              //定义提示文本
              hintText: "请输入名称",
              //定义边框
              border: OutlineInputBorder(),

              //在用户输入时,会切换到左上角的提示文本
              labelText: "用户名"),
        )

CheckBox

Checkbox(
          value: reading,
          onChanged: (value) {
            setState(() {
              this.reading = value != null && value;
            });
          },
        )

---

Radio

• 通过 groupValue 字段将Radio进行联动

Row(
    children: [
      Radio(onChanged: (value) {
        setState(() {
          this.sex = value as int;
        });
      }, groupValue: this.sex, value: 0,),
      Text("男士"),
      SizedBox(width: 20),
      Radio(onChanged: (value) {
        setState(() {
          this.sex = value as int;
        });
      }, groupValue: this.sex, value: 1,),
      Text("女士"),
    ],
  ),

---

示例

• 实际操作时,使用循环生成item,方便数据的采集

//定义用户名文本框布局的Controller
TextEditingController _userName = TextEditingController();

//爱好 对应checkBox
bool reading = false;
bool swimming = false;

//性别 对应radio
int sex = 0;

Container(
        margin: EdgeInsets.all(10),
        child: Center(
          child: Column(
            children: [
              //文本框
              TextField(
                controller: _userName,

                //设置最大支持行数
                maxLines: 3,

                //设置最大支持长度(会在右下角显示字的个数)
                maxLength: 300,

                //设置为true时,变为密码框 注意: 设置为密码显示时,最大行数必须置为1
//                obscureText: true,

                //监听文本变化
                onChanged: (value) {
                  //处理光标
                  setState(() {
                    _userName.text = value;
                  });
                },

                decoration: InputDecoration(
                    //定义提示文本
                    hintText: "请输入名称",
                    //定义边框
                    border: OutlineInputBorder(),

                    //在用户输入时,会切换到左上角的提示文本
                    labelText: "用户名"),
              ),

              Row(
                children: [
                  Checkbox(
                    value: reading,
                    onChanged: (value) {
                      setState(() {
                        this.reading = value != null && value;
                      });
                    },
                  ),
                  Text("读书"),
                  SizedBox(width: 20),
                  Checkbox(
                      value: swimming,
                      onChanged: (value) {
                        setState(() {
                          this.swimming = value != null && value;
                        });
                      }),
                  Text("游泳"),
                ],
              ),

              Row(
                children: [
                  Radio(onChanged: (value) {
                    setState(() {
                      this.sex = value as int;
                    });
                  }, groupValue: this.sex, value: 0,),
                  Text("男士"),
                  SizedBox(width: 20),
                  Radio(onChanged: (value) {
                    setState(() {
                      this.sex = value as int;
                    });
                  }, groupValue: this.sex, value: 1,),
                  Text("女士"),
                ],
              ),

              ElevatedButton(
                  onPressed: () {
                    print("获取到的用户名数据:  ${_userName.text}\n"
                        "爱好 :  可通过列表的形式获取\n"
                        "性别:  ${this.sex==0?"男":"女"}");
                  },
                  child: Text("获取表单数据"))
            ],
          ),
        ),
      )