Flutter 组件之表单组件TextField、CheckBox、Radio、Switch

最新推荐文章于 2025-10-17 00:07:16 发布

原创

最新推荐文章于 2025-10-17 00:07:16 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了Flutter中各种表单与控件的使用方法，包括TextField、Checkbox、Radio、Switch等，以及如何通过StatefulWidget实现表单状态管理，获取用户输入的数据。

TextField

普通输入框

TextField(//文本输入框
  decoration: InputDecoration(//表单定义模块
      hintText: "请输入用户名"//类似html的placeholder
  ),
),

图标输入框

TextField(//文本输入框
  decoration: InputDecoration(//表单定义模块
      hintText: "图标输入框",
      icon: Icon(Icons.people)//表单内的Icon
  ),
),

带有边框的本输入框

TextField(//文本输入框
	decoration: InputDecoration(//表单定义模块
	hintText: "带有边框的表单",//类似html的placeholder
	border: OutlineInputBorder(),//带有边框的输入框
),

多行文本输入框

 TextField(//多行文本输入框
   maxLines: 4,//控制函数,类似html 文本域textarea
   decoration: InputDecoration(//表单定义模块
       hintText: "请输入多行文本"//类似html的placeholder
   ),
 ),

密码输入框

 TextField(
   obscureText: true,//密码输入框属性
   decoration: InputDecoration(
       labelText: "密码：", //label文字内容
       hintText: "密码"//
   ),
 ),

在这里插入图片描述

模拟登陆设置获取输入框内容

class _PeopleState extends State<People> {
   
   
//  表单controller-> TextEditingController()可以配置表单默认显示内容
  var _username=new TextEditingController();   //初始化的时候给表单赋值
  var _password;//定义类属性

  @override
  void initState() {
   
   //初始化组件name默认赋值
    // TODO: implement initState
    super.initState();
    _username.text='初始值';//初始化数据
  }

  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
        appBar: AppBar(
          title: Text('模拟登陆'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          // child:TextDemo() ,
          child:Column(
            children: <Widget>[
              TextField(//input文本输入框
                decoration: InputDecoration(//表单定义模块
                    hintText: "请输入用户名"//类似html的placeholder
                ),
                onChanged: (value){
   
   
                  setState(() {
   
   //设置获取文本内容
                    _username.text=value;
                  });
                },
              ),
              SizedBox(height: 20,),
              TextField(
                obscureText: true,//密码输入框属性
                decoration: InputDecoration(
                    hintText: "密码"//
                ),
                onChanged: (value){
   
   //表单改变事件可以获取vlue值
                  setState(() {
   
   
                    this._password=value;//不设置默认值直接就可以赋值
                  });
                },
              ),