一 TextField

Textfield常见的属性以及基本的样式

Column(
            children: [
              SizedBox(height: 20),
              // 示例1
              TextField(
                decoration: InputDecoration(hintText: "说点什么"),
              ),
              SizedBox(height: 20),
              // 示例2
              TextField(
                // 最多5行数据
                maxLines: 5,
                decoration: InputDecoration(
                    hintText: "表达一下心情吧", border: OutlineInputBorder()),
              ),
              SizedBox(height: 20),
              // 示例3
              TextField(
                // 隐藏输入
                obscureText: true,
                decoration: InputDecoration(
                    hintText: "请输入密码", border: OutlineInputBorder()),
              ),
              SizedBox(height: 20),
              // 示例4
              TextField(
                decoration: InputDecoration(
                    // 显示在左上角的一个效果
                    labelText: "用户名",
                    border: OutlineInputBorder()),
              ),
            ],
          ),

二  TextFiled 获取输入数据

TextEditingController

Column(
            children: [
              SizedBox(height: 20),
              // 示例1
              TextField(
                // 绑定TextEditingController
                controller: _username,
                // 监听输入框的值变化的过程
                onChanged: (value) {
                  setState(() {
                    print(value);
                    // 赋值操作
                    this._username.text = value;
                  });
                },
                decoration: InputDecoration(hintText: "说点什么"),
              ),
              SizedBox(height: 20),
              Container(
                width: 200,
                height: 50,
                child: ElevatedButton(
                  child: Text("打印输入"),
                  onPressed: () {
                    print(this._username.text);
                  },
                ),
              )
            ],
          )

三 checkBox 的使用

基本使用

 //标记是否选中的状态
  bool _flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("checkBox")),
      body: Container(
        width: 400,
        height: 400,
        child: Column(
          children: [
            Checkbox(
                value: _flag,
                onChanged: (value) {
                  setState(() {
                    _flag = value!;
                  });
                }),
            SizedBox(height: 20),
            Text("${_flag == true ? "选中" : "未选中"}")
          ],
        ),
      ),
    );
  }

四 CheckBoxListTile 的使用

 CheckboxListTile(
                // 主标题
                title: Text("是否已婚"),
                subtitle: Text("恭喜发财"),
                value: _flag,
                onChanged: (value) {})

五 Radio的使用

基本使用

Row(
          children: [
            Text("男"),
            Radio(
                value: 1,
                groupValue: this._sex,
                onChanged: (value) {
                  setState(() {
                    this._sex = value!;
                  });
                  print(value);
                }),
            Text("女"),
            Radio(
                value: 2,
                groupValue: this._sex,
                onChanged: (value) {
                  setState(() {
                    this._sex = value!;
                  });
                  print(value);
                }),
          ],
        )

radioListTile 的使用

Container(
              height: 400,
              width: 300,
              child: Column(
                children: [
                  RadioListTile(
                      title: Text("11"),
                      subtitle: Text("222"),
                      value: 0,
                      groupValue: _sex,                      
                      onChanged: (value) {
                        setState(() {
                          this._sex = value!;
                        });
                        print(value);
                      }),
                  RadioListTile(
                      title: Text("11"),
                      subtitle: Text("222"),
                      value: 1,
                      groupValue: _sex,
                      onChanged: (value) {
                        setState(() {
                          this._sex = value!;
                        });
                        print(value);
                      }),
                ],
              ),
            )

六  Switch开关组件

 Switch(
                      value: _flag,
                      onChanged: (value) {
                        setState(() {
                          _flag = value;
                        });
                      }),

七 表单输入小demo

import 'package:flutter/material.dart';

class FormDemoPage extends StatefulWidget {
  const FormDemoPage({super.key});

  @override
  State<FormDemoPage> createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  String username = "";

  int sex = 1;

  // 定义爱好list
  List hobby = [
    {"checked": true, "title": "游泳"},
    {"checked": false, "title": "跑步"},
    {"checked": true, "title": "登山"},
  ];

  // 返回爱好数组widget
  List<Widget> _getHobby() {
    List<Widget> tempList = [];
    for (int i = 0; i < this.hobby.length; i++) {
      tempList.add(Row(
        children: [
          Text(this.hobby[i]["title"] + ":"),
          Checkbox(
              value: this.hobby[i]["checked"],
              onChanged: (value) {
                setState(() {
                  this.hobby[i]["checked"] = value!;
                });
              })
        ],
      ));
    }
    return tempList;
  }

  // 性别改变的方法抽取出来
  void _sexChanged(value) {
    setState(() {
      this.sex = value!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("学员信息登记系统")),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(children: [
          // 1 用户名信息
          TextField(
            onChanged: (value) {
              setState(() {
                this.username = value;
              });
            },
            decoration: InputDecoration(hintText: "请输入用户名"),
          ),
          // 2 性别信息
          Row(
            children: [
              Text("男"),
              Radio(value: 1, groupValue: sex, onChanged: this._sexChanged),
              Text("女"),
              Radio(value: 2, groupValue: sex, onChanged: this._sexChanged)
            ],
          ),
          Row(
            children: _getHobby(),
          ),
          Container(
            width: 200,
            height: 50,
            child: ElevatedButton(
              child: Text("提交数据"),
              onPressed: () {
                print(this.sex);
                print(this.username);
                print(this.hobby);
              },
            ),
          )
        ]),
      ),
    );
  }
}