17. Flutter 学習パスで一般的に使用されるフォーム TextField、CheckBox、およびその他のコンポーネント

TextField共通のプロパティ:

属性	説明する
maxLines	テキスト ボックスを複数行のテキスト ボックスに変更します。デフォルトは 1 行です。
onChanged	テキストボックスが変更されたときに起動する時間
decoration	hintTextEditText中属性と同様hint。border境界線。: nameOutlineInputBorderと組み合わせて使用​​され、構成に使用されます。labelTextlabellabelStylelabel
obscureText	j テキストボックスをパスワードボックスに変更します
controller	controllerTextEditingController ()フォーム上でデフォルトで設定できる内容と組み合わせる

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共通の属性

属性	説明する
value	trueまたはfalse
onChange	イベントが発生したときに発生する
activeColor	選択した色、背景色
checkColor	選択した色、CheckBox中のチェックマークの色

CheckboxListTile 複数選択ボックス コンポーネント

属性	説明する
value	trueまたはfalse
onChange	イベントが発生したときに発生する
activeColor	選択した色、背景色
title	タイトル
subtitle	副題
secondary	アイコンまたは画像を設定する
selected	選択時に文字の色が変わるかどうか