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

一、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