开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情
Button
按钮是App中常用的基础控件，但是iOS中的UIButton往往在使用时会有一些局限性，Flutter中则定义了更加丰富的Button组件:ElevatedButton、TextButton、OutLineButton、IconButton。所有的Material的按钮都有以下共同点。
- 按下时会有水波纹动画
- 有一个onPressed属性来设置点击回调，如果不提供回调按钮会处于禁用状态。
ElevatedButton
漂浮按钮，默认带有阴影和灰色背景，按下后阴影会变大。 实例：
ElevatedButton(
child: Text("normal"),
onPressed: () {},
);
TextButton
文本按钮，默认背景透明，不带阴影，按下有背景色。实例：
TextButton(
child: Text("normal"),
onPressed: () {},
)
OutlineButton
默认一个边框，不带阴影且背景透明，按下边框颜色会变亮的同时出现背景和阴影。
OutlineButton(
child: Text("normal"),
onPressed: () {},
)
- 以上按钮都带有一个icon构造函数，也就是类似于iOS的UIButton中可以添加图片
ElevatedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: _onPressed,
),
OutlineButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: _onPressed,
),
TextButton.icon(
icon: Icon(Icons.info),
label: Text("详情"),
onPressed: _onPressed,
),
IconButton
可点击的Icon，不包括文字，默认无背景，点击后会出现背景。
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
)
Image
Image常用的添加方式有三种：本地图片、网络图片、缓存读取图片。
本地图片
需先在pubspec.yaml中添加资源：
注意格式缩进必须严格按照格式。
assets:
- images/avatar.png
使用方法：
Image(
image: AssetImage("images/avatar.png"),
width: 100.0
);
Image.asset("images/avatar.png",
width: 100.0,
)
网络图片
网络图片是从网络中根据URL下载图片，也是两种获取方法。
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)
Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100.0,
)
Image 继承于StatefulState，可直接用于展示绘制。常用属性：
const Image({
...
this.width, //图片的宽
this.height, //图片高度
this.color, //图片的混合色值
this.colorBlendMode, //混合模式
this.fit,//缩放模式：有fill、cover、contain、fitWidth、fitHeight、none
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式
...//更多可到源码中看。
})
需要注意的是Image本身在加载过后会被缓存在内存中，有点类似于[UIImage imageWihtName:]
ICON
Flutter 开发中，可以直接使用iconfont，他是将图标做成字体文件，然后通过制定不同的字符显示不同的图片。以下是特征：
- 体积小：可以减小安装包大小
- 矢量图片：缩放不影响清晰度
- 可以应用在文本样式中：可以像改变文本一样改变颜色、大小、对齐等
- 可以通过TextSpan和文本混用。 注意：在使用的时候需要在pubspec.ymal中进行配置。
flutter:
//注意对齐
uses-material-design: true//使用矢量图片是需要设置
fonts:
- family: "myIcon" #指定一个字体名（自定义图片时需要）
fonts:
- asset: fonts/iconfont.ttf
使用实例：
Text(
" \uE287",//系统的
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green,
),
);
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green),
Icon(Icons.error,color: Colors.green),
Icon(Icons.fingerprint,color: Colors.green),
],
)
自定义的Icon
class MyIcons{
// book 图标
static const IconData book = const IconData(
0xe614,
fontFamily: 'myIcon',
matchTextDirection: true
);
// 微信图标
static const IconData wechat = const IconData(
0xec7d,
fontFamily: 'myIcon',
matchTextDirection: true
);
}
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(MyIcons.book,color: Colors.purple),
Icon(MyIcons.wechat,color: Colors.green),
],
)
