Flutter常用UI控件

二、常用控件

文本控件

文本显示控件:TextView

1. 简介
   用于显示文本
2. 效果图
   
3. 代码

Text('文本显示')

富文本显示控件:RichText

1. 简介
   用于显示风格多样文字,如一句话中出现多种字号、颜色、是否加粗等文字.
2. 效果图
   
3. 代码

RichText(
    text: TextSpan(style: TextStyle(fontSize: 18), children: [
      TextSpan(text: "红色", style: TextStyle(color: Colors.red)),
      TextSpan(
        text: "加粗",
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(
        text: "字号+",
        style: TextStyle(color: Colors.black, fontSize: 25.0),
      ),
      TextSpan(
        text: "字号-",
        style: TextStyle(color: Colors.black, fontSize: 12.0),
      ),
    ]),
    textDirection: TextDirection.ltr,
  )

文本输入控件:TextField

普通文本输入

1. 简介
   用于输入文本信息
2. 效果图
   
3. 代码

TextField()

密码输入

1. 简介
   用于输入密码
2. 效果图
   
3. 代码

TextField(obscureText: true)

按钮控件

扁平化按钮:MaterialButton

1. 简介
   扁平化按钮
2. 效果图
   
3. 代码

new MaterialButton(
  color: Colors.blue,
  textColor: Colors.white,
  child: new Text('MaterialButton'),
  onPressed: () {},
)

扁平化按钮(背景透明):FlatButton

1. 简介
   FlatButton与MaterialButton类似,只是背景是透明.
2. 效果图
   
3. 代码

new FlatButton(
  child: new Text('FlatButton'),
  onPressed: () {},
)

凸起按钮:RaisedButton

1. 简介
   具有凸起效果的按钮
2. 效果图
   
3. 代码

new RaisedButton(
  child: new Text('RaisedButton'),
  onPressed: () {},
)

线框按钮:OutlineButton

1. 简介
   具有边框的按钮
2. 效果图
   
3. 代码

new OutlineButton(
    borderSide: new BorderSide(color: Theme.of(context).primaryColor),
    child: new Text(
      '线框按钮',
    ),
    onPressed: () {},
  )

图片按钮:IconButton

1. 简介
   图片按钮
2. 效果图
   
3. 代码

• 从Icons里自带图标加载

new IconButton(
  icon: new Icon(Icons.add_circle),
  onPressed: () {},
)

• 从本地指定目录下加载

new IconButton(
  icon: ImageIcon(AssetImage("images/test.png")),
  onPressed: () {},
)

PS:
从本地目录加载时,需要先将图片放到本地指定目录,并修改pubspec.yaml添加图片目录.

悬浮按钮:FloatingActionButton

1. 简介
   悬浮按钮
2. 效果图
   
3. 代码

new FloatingActionButton(
  child: new Icon(Icons.add_a_photo),
  onPressed: () {},
),

开关:Switch

1. 简介
   实现开关效果
2. 效果图
   
3. 代码

Switch(
    activeColor: Colors.white,
    activeTrackColor: Colors.green,
    inactiveThumbColor: Colors.white,
    inactiveTrackColor: Colors.grey,
    value: true,
    onChanged: (bool v) {},
  )

IOS风格开关控件:CupertinoSwitch

1. 简介
   实现开关效果
2. 效果图
   
3. 代码

new CupertinoSwitch(
    value: true,
    onChanged: (bool value) {},
  )

带标题开关:SwitchListTile

1. 简介
   带有标题文字和图标的开关
2. 效果图
   
3. 代码

new SwitchListTile(
      secondary: const Icon(Icons.airplanemode_active),
      title: const Text('带标题开关'),
      value: this.isSwitchSelected,
      onChanged: (bool value) {
        setState(() {
          this.isSwitchSelected = value;
        });
      },
    )

单选框:Radio

1. 简介
   实现单选功能

• 单个单选框

1. 效果图
   
2. 代码

new Radio(
      groupValue: this.radioValue,
      activeColor: Colors.blue,
      value: '用户选择值',
      onChanged: (String val) {
        this.setState(() {
          this.radioValue = val;
        });
      },
    )

• 单选框组
  多个单选框,可以以任何形式排列在一起,供用户选择.

1. 效果图
   
2. 代码

Row(
      children: <Widget>[
        Radio<String>(
            value: "单选框值1",
            groupValue: radioValue,
            onChanged: (val) {
              setState(() {
                radioValue = val;
              });
            }),
        Radio<String>(
            value: "单选框值2",
            groupValue: radioValue,
            onChanged: (val) {
              setState(() {
                radioValue = val;
              });
            }),
      ],
    )

带标题单选框组:RadioListTile

1. 简介
   带有标题文字和图标的单选框组
2. 效果图
   
3. 代码

Column(
      children: <Widget>[
        RadioListTile(
          value: 0,
          groupValue: radioListValue,
          onChanged: (value) {
            setState(() {
              radioListValue = value;
            });
          },
          title: Text('单选框值1'),
          subtitle: Text('描述1'),
          secondary: Icon(Icons.filter_1),
          //右侧图标
          selected: radioListValue == 0,
        ),
        RadioListTile(
          value: 1,
          groupValue: radioListValue,
          onChanged: (value) {
            setState(() {
              radioListValue = value;
            });
          },
          title: Text('单选框值2'),
          subtitle: Text('描述2'),
          secondary: Icon(Icons.filter_2),
          //右侧图标
          selected: radioListValue == 0,
        ),
      ],
    )

复选框:CheckBox

1. 简介
   实现多选功能
2. 效果图
   
3. 代码

new Checkbox(
      value: this.isChecked,
      activeColor: Colors.blue,
      onChanged: (bool val) {
        setState(() {
          this.isChecked = val;
        });
      },
    )

带标题复选框:CheckboxListTile

1. 简介
   带有标题文字和图标的复选框
2. 效果图
   
3. 代码

CheckboxListTile(
      secondary: const Icon(Icons.airplanemode_active),
      title: const Text('带标题复选框'),
      value: isChecked,
      onChanged: (bool value) {
        setState(() {
          isChecked = value;
        });
      },
    )

图片控件:Image

1. 简介
   用于显示图片
2. 效果图
   
3. 代码

• 从本地读取图片

new Image.asset("images/test.png")

PS:
从本地目录加载时,需要先将图片放到本地指定目录,并修改pubspec.yaml添加图片目录.

• 从网络读取图片

Image.network('https://upload-images.jianshu.io/upload_images/6169789-91306f8ca35b8fe2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240')

进度条控件:ProgressBar

日期与时间选择控件

日期选择控件:DatePicker

时间选择控件:TimePicker

菜单

弹出菜单:DropdownButton

1. 简介
   点击后弹出菜单
2. 效果图
   
3. 代码

new DropdownButton<String>(
    onChanged: (String newValue) {},
    items: <String>['Menu1', 'Menu2', 'Menu3', 'Menu4']
        .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList(),
  )