24Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox、Radio、Switch...

小灰灰 2023-08-17 15:59 133阅读 0赞

**一、Flutter常用表单介绍：**

**CheckboxListTile、RadioListTile、SwitchListTile、Slide。**

**二、TextField:表单常见属性：**

**maxLines:设置此参数可以把文本框改为多行文本框**

**onChanged:文本框改变的时候触发的事件。**

**decoration:**

**hintText:类似html中的placeholder**

**border:配置文本框边框**

**OutlineInputBorder：配合使用**

**labelText:lable的名称**

**labelStyle:配置label的样式**

**obscureText:把文本框改为密码框**

**controller:controller结合TextEditingController()可以配置表单默认显示的内容。**

**三、Checkbox、CheckboxListTile多选框组件：**

**Checkbox常见属性：**

**value:true或者false**

**onChanged改变的时候触发的事件。**

**activeColor:选中的颜色、背景颜色**

**checkColor:选中的颜色、Checkbox里面对号的颜色。**

**CheckboxListTile常见属性：**

**value:true或者false**

**onChanged:改变的时候触发的事件。**

**activeColor:选中的颜色、背景颜色**

**title:标题**

**subtitle:二级标题。**

**secondary:配置图标或者图片。**

**selected:选中的时候文字颜色是否跟着改变。**

**TextField.dart**

import 'package:flutter/material.dart';
    
    class TextFieldDemoPage extends StatefulWidget {
      TextFieldDemoPage({Key key}) : super(key: key);
    
      _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
    }
    
    class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
      var _username=new TextEditingController(); //初始化的时候，给表单赋值：
      var _password;
      @override
      void initState(){
        super.initState();
        _username.text="初始值";
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('表单演示页面'),
          ),
          body: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: <Widget>[
                // TextField(),
                // SizedBox(height: 20),
                // TextField(
                //   decoration: InputDecoration(
                //     hintText: "请输入搜索的内容",
                //     border: OutlineInputBorder()
                //   ),
                // ),
                // SizedBox(height: 20),
                // TextField(  //设置为多行文本框：
                //   maxLines: 4,
                //   decoration: InputDecoration(
                //     hintText: "多行文本框",
                //     border: OutlineInputBorder()
                //   ),
                // ),
                // SizedBox(height: 20),
                // TextField(
                //   obscureText: true, //把文本框修改成密码框：
                //   decoration: InputDecoration(
                //     hintText: "密码框",
                //     border: OutlineInputBorder()
                //   ),
                // ),
                // SizedBox(height: 20),
                // TextField(
                //   obscureText: true,
                //   decoration: InputDecoration(
                //     hintText: "labelText使用",
                //     border: OutlineInputBorder(),
                //     labelText: "用户名"
                //   ),
                // ),
                TextDemo(),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                      hintText: "labelText使用",
                      border: OutlineInputBorder(),
                      labelText: "密码"),
                      onChanged: (value){
                        setState(() {
                          this._password=value;
                        });
                      },
                ),
                TextField(
                  decoration:
                      InputDecoration(icon: Icon(Icons.search), hintText: "请输入用户名"),
                      controller: _username,
                      onChanged: (value){
                        setState(() {
                          _username.text=value;
                        });
                      },
                ),
                Container(
                  width: double.infinity,
                  height: 40,
                  child: RaisedButton(
                    child: Text("登录"),
                    onPressed: (){
                      print(this._username.text);
                      print(this._password);
                    },
                    color: Colors.blue,
                    textColor: Colors.white,
                  ),
                )
              ],
            ),
          ),
        );
      }
    }
    
    class TextDemo extends StatelessWidget {
      const TextDemo({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: TextField(
            decoration:
                InputDecoration(icon: Icon(Icons.people), hintText: "请输入用户名"),
          ),
        );
      }
    }

CheckBox.dart

import 'package:flutter/material.dart';
    class CheckBoxDemoPage extends StatefulWidget {
      CheckBoxDemoPage({Key key}) : super(key: key);
    
      _CheckBoxDemoPageState createState() => _CheckBoxDemoPageState();
    }
    // CheckBox
    class _CheckBoxDemoPageState extends State<CheckBoxDemoPage> {
      var flag=true;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar:AppBar(
            title: Text('CheckBox'),
          ),
          body:Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Checkbox(
                    value: this.flag,
                    onChanged: (v){
                      setState(() {
                        this.flag=v;
                      });
                    },
                    activeColor: Colors.red,
                    
                  )
                ],
              ),
              Row(
                children: <Widget>[
                  Text(this.flag?'选中':'未选中')
                ],
              ),
              SizedBox(height: 40),
              CheckboxListTile(
                value: this.flag,
                onChanged: (v){
                  setState(() {
                    this.flag=v;
                  });
                },
                title: Text('标题'),
                subtitle: Text('这是一个二级标题'),
                secondary: Icon(Icons.help),
              )
            ],
          )
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11534089.html