Flutter 中的TextField、Checkbox、CheckboxListTile

TextField文本框组件

main.dart

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';

void main() {
  runApp(TextFieldPage());
}

//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class TextFieldPage extends StatefulWidget {
  TextFieldPage({Key key}) : super(key: key);

  _TextFieldPageState createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("TextField Demo"),
        ),
        //内容区域

        body: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              TextField(
                //最多输入行数
                maxLines: 3,
                decoration: InputDecoration(
                  hintText: "请输入搜索内容",
                  //给文本框加边框
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 10),
              TextField(
                //最多输入行数
                maxLines: 1,
                //密码框
                obscureText: true,
                decoration: InputDecoration(
                  hintText: "密码框",
                  //给文本框加边框
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 10),
              TextField(
                //最多输入行数
                maxLines: 1,
                decoration: InputDecoration(
                  labelText: "用户名",
                  //给文本框加边框
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 10),
              TextField(
                //最多输入行数
                maxLines: 1,
                decoration: InputDecoration(
                  icon: Icon(Icons.people),
                  hintText: "请输入用户名",
                ),
              ),
            ],
          ),
        ),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

显示效果：

 

获取文本框中的值

 

main.dart

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';

void main() {
  runApp(TextFieldPage());
}

//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class TextFieldPage extends StatefulWidget {
  TextFieldPage({Key key}) : super(key: key);

  _TextFieldPageState createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  var _searchContent = new TextEditingController();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._searchContent.text = "空调";
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("TextField Demo"),
        ),
        //内容区域

        body: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              TextField(
                //最多输入行数
                maxLines: 1,
                decoration: InputDecoration(
                  hintText: "请输入搜索内容",
                  //给文本框加边框
                  border: OutlineInputBorder(),
                ),
                controller: this._searchContent,
                //改变回调
                onChanged: (value) {
                  setState(() {
                    _searchContent.text = value;
                  });
                },
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                //容器自适应宽度
                width: double.infinity,
                height: 45,
                child: RaisedButton(
                  child: Text("登录"),
                  onPressed: () {
                    print(this._searchContent.text);
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              )
            ],
          ),
        ),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

显示效果：

 

 

Checkbox、CheckboxListTile组件

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';

void main() {
  runApp(TextFieldPage());
}

//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class TextFieldPage extends StatefulWidget {
  TextFieldPage({Key key}) : super(key: key);

  _TextFieldPageState createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  var flag = true;
  var flags = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("TextField Demo"),
        ),
        //内容区域
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                //单选按钮
                Checkbox(
                  value: this.flag,
                  onChanged: (value) {
                    setState(() {
                      this.flag = value;
                    });
                  },
                  //设置选中的颜色
                  activeColor: Colors.red,
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(this.flag ? "选中" : "未选中"),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            CheckboxListTile(
              value: this.flags,
              onChanged: (value) {
                setState(() {
                  this.flags = value;
                });
              },
              //标题
              title: Text("这是一级标题"),
              //副标题
              subtitle: Text("这是二级标题"),
              //图标
              secondary: Icon(Icons.settings),
            )
          ],
        ),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

 

显示效果：