Flutter 表单

Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox(多选按钮)、Radio（单选按钮）、Switch CheckboxListTile、RadioListTile、SwitchListTile、Slide。

TextField表单的基本用法

TextField表单常见属性：

示例

class TextFieldPage extends StatefulWidget {
  const TextFieldPage({super.key});
  @override
  State<TextFieldPage> createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: ListView(
            children: [
              const TextField(), //单文本框
              const SizedBox(
                height: 20,
              ),
              const TextField(
                  decoration: InputDecoration(hintText: "用户名") //提示文字
                  ),
              const SizedBox(
                height: 20,
              ),
              const TextField(
                  decoration: InputDecoration(
                      hintText: "用户名", border: OutlineInputBorder() //带边框
                      )),
              const SizedBox(
                height: 10,
              ),

              TextField(
                  obscureText: true, //密码框
                  decoration: InputDecoration(
                      hintText: "密码",
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20), //圆角
                      ),
                      suffixIcon: Icon(Icons.visibility) //
                      )),

              const SizedBox(height: 40),
              TextField(
                  decoration: InputDecoration(
                      hintText: "搜索",
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20), //圆角
                          borderSide:
                              const BorderSide(width: 5, color: Colors.yellow)),
                      suffixIcon: const Icon(Icons.close) //框里面的后面图标
                      )),
              const SizedBox(height: 40),

              const TextField(
                  decoration: InputDecoration(
                      icon: Icon(Icons.add), //框前图标
                      prefixIcon: Icon(Icons.lock), //框里面的前面图标
                      prefixText: "http://")),
              const SizedBox(height: 40),

              const TextField(
                  maxLength: 10, //多文本框最多输入10个
                  maxLines: 4, //4行
                  decoration: InputDecoration(
                      hintText: "用户名", border: OutlineInputBorder() //带边框
                      ) //提示文字
                  ),
            ],
          ),
        ),
      ),
    );
  }
}

获取TextField表单输入的内容 

class TextFieldPage extends StatefulWidget {
  const TextFieldPage({super.key});
  @override
  State<TextFieldPage> createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  late String username;
  late String password;
  late bool bools = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: ListView(
            children: [
              TextField(
                decoration: const InputDecoration(
                    hintText: "用户名", border: OutlineInputBorder()),
                onChanged: (value) => setState(() {
                  username = value;
                }),
              ),
              const SizedBox(
                height: 10,
              ),
              TextField(
                obscureText: bools,
                decoration: InputDecoration(
                  hintText: "密码",
                  border: OutlineInputBorder(),
                  suffixIcon: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        bools = false;
                      });
                      Timer(Duration(seconds: 3), () {
                        // 3秒后执行这里的代码
                        setState(() {
                          bools = true;
                        });
                      });
                    },
                    child: Icon(Icons.visibility),
                  ),
                ),
                onChanged: (value) {
                  //获取表单的内容
                  print("-----------------$value");
                  password = value;
                },
              ),
              const SizedBox(height: 40),
              ElevatedButton(
                  onPressed: () {
                    print(username);
                    print(password);
                  },
                  child: const Text("获取信息"))
            ],
          ),
        ),
      ),
    );
  }
}

TextEditingController 配置初始化值

核心代码

  late TextEditingController _usernameController;
  String username = "zhangsan";
  String password = "";
  @override
  void initState() {
    super.initState();
    _usernameController = TextEditingController.fromValue(TextEditingValue(
        text: username,
        selection: TextSelection.fromPosition(TextPosition(
            affinity: TextAffinity.downstream, offset: username.length))));
  }

完整代码 

class TextFieldPage extends StatefulWidget {
  const TextFieldPage({super.key});
  @override
  State<TextFieldPage> createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  late TextEditingController _usernameController;
  String username = "zhangsan";
  String password = "";
  @override
  void initState() {
    super.initState();
    _usernameController = TextEditingController.fromValue(TextEditingValue(
        text: username, //赋值默认值
        selection: TextSelection.fromPosition(TextPosition(
            //固定写法
            affinity: TextAffinity.downstream,
            offset: username.length))));
  }

  @override
  void dispose() {
    _usernameController.dispose(); //进行销毁
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: ListView(
            children: [
              TextField(
                controller: _usernameController, //绑定初始化参数
                decoration: const InputDecoration(
                    hintText: "用户名", border: OutlineInputBorder()),
                onChanged: (value) => setState(() {
                  username = value;
                }),
              ),
              const SizedBox(
                height: 10,
              ),
              TextField(
                obscureText: true,
                decoration: const InputDecoration(
                    hintText: "密码",
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.visibility)),
                onChanged: (value) {
                  password = value;
                },
              ),
              const SizedBox(height: 40),
              ElevatedButton(
                  onPressed: () {
                    print(username);
                    print(password);
                  },
                  child: const Text("登录"))
            ],
          ),
        ),
      ),
    );
  }
}