17. Commonly used form TextField, CheckBox and other components in the Flutter learning path

TextFieldCommon properties:

Attributes	describe
maxLines	Change the text box to a multi-line text box, the default is a single line
onChanged	The time to fire when the text box changes
decoration	hintTextSimilar to EditTextthe middle hintattribute. borderBorder line, OutlineInputBorderused in conjunction with, labelText: labelname, , used for labelStyleconfigurationlabel
obscureText	j Change the text box to a password box
controller	controllerCombined with TextEditingController ()the content that can be configured by default on the form

class TextFieldPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TextFieldPageState();
  }

}

class _TextFieldPageState extends State<TextFieldPage> {

  var _message=TextEditingController() ;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _message.text='初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TextFieldDemo'),),
      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: 3,
              decoration: InputDecoration(
                hintText: '多行文本框',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: '密码框',
                border: OutlineInputBorder(

                ),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              decoration: InputDecoration(
                hintText: '请输入用户名',
                labelText: '用户名',
                border: OutlineInputBorder(

                ),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              decoration: InputDecoration(
                hintText: '请输入用户名',
                icon: Icon(Icons.account_circle),
                border: OutlineInputBorder(
                ),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              controller:_message,
              decoration: InputDecoration(
                hintText: '获取表单内容',
                labelText: '获取表单内容',
                icon: Icon(Icons.account_circle),
                border: OutlineInputBorder(
                ),
              ),
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('获取上面文本框的内容'),
              onPressed: (){
                print('${_message.text}');
              },
            )
          ],
        ),
      ),
    );
  }
}

Checkbox but choose

Checkboxcommon attributes

Attributes	describe
value	trueorfalse
onChange	Event fired when the
activeColor	selected color, background color
checkColor	The selected color, CheckBoxthe color of the check mark inside

CheckboxListTile multi-select box component

Attributes	describe
value	trueorfalse
onChange	Event fired when the
activeColor	selected color, background color
title	title
subtitle	secondary title
secondary	Configure icon or picture
selected	Whether the text color changes when selected