Icon: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Icon
ImageIcon: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > ImageIcon
IconButton: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > IconButton
图形图标,来自于所述的字体的字形绘制。图标不可交互式。
创建Icon对象要有IconData成员,而IconData可以从Icons类中直接获取!
如:new Icon(Icons.menu);
在配置文件pubspec.yaml里有说明:
# The following line ensures that the Material Icons font is included with your application, so that you can use the icons in the material Icons class.(下面一行确保应用程序中包含了Material Icons字体,以便您可以在Material Icons类中使用图标。)
uses-material-design: true
要使用flutter提供的icon要配置上面一行,才能使用Material Icons字体,如new Icon(Icons.menu);
icon有以下图标,图标对应值查看https://material.io/tools/icons/?style=baseline或者Icons文档:
图片地址:https://raw.githubusercontent.com/flutter/cupertino_icons/master/map.png
const Icon(this.icon, {
Key key,
this.size,
this.color,
this.semanticLabel,
this.textDirection,
}) : super(key: key);
参数Key key:官方解释:https://flutterchina.club/widgets-intro/#key
逻辑像素中图标的大小(pt.dp)。由于图标是正方形,设置size等于同时设置了宽高。
默认为当前IconTheme大小(如果有)。如果没有 IconTheme,或者它没有指定显式大小,则默认为24.0(带逻辑像素单位)。
设置图标颜色,如果没设置以主题是黑色则图标颜色默认为白色,如果主题较浅则图标颜色默认为黑色。
帮助盲人或者视力有障碍的用户提供语言辅助描述
渲染图标的方向,前提需要IconData.matchTextDirection字段设置为true,如Icons类里:
static const IconData backspace = IconData(0xe14a, fontFamily: 'MaterialIcons', matchTextDirection: true);
static const IconData backup = IconData(0xe864, fontFamily: 'MaterialIcons');
backup不支持,而backspace 支持textDirection
从下面的地址下载和使用google提供的fonts,使用不同字体,丰富APP!
https://github.com/google/fonts
https://fonts.google.com/
推荐从阿里巴巴矢量图库:http://www.iconfont.cn/
相关使用教程:http://www.iconfont.cn/help/detail?helptype=code
自定义图形图标,来自于图片绘制。图标不可交互式。
const ImageIcon(this.image, {
Key key,
this.size,
this.color,
this.semanticLabel,
}) : super(key: key);
比起Icon,不同之处就是用自定义ImageProvider来定义图标
ImageProvider在文章:《Flutter Image 参数详解》讲解过,有五种
示例: ImageIcon(AssetImage('images/test.png'), color: Colors.red,);
说明一下,图片一定要png,加载出来是纯色的背景图片,颜色通过color定义
如原图test.png:
输出效果图:
图形图标,可交互式的
const IconButton({
Key key,
this.iconSize = 24.0,
this.padding = const EdgeInsets.all(8.0),
this.alignment = Alignment.center,
@required this.icon,
this.color,
this.highlightColor,
this.splashColor,
this.disabledColor,
@required this.onPressed,
this.tooltip
}) : assert(iconSize != null),
assert(padding != null),
assert(alignment != null),
assert(icon != null),
super(key: key);
在《Flutter Container 参数详解》2.3详解过,略
在《Flutter Container 参数详解》2.2详解过,略
一个任意Widget控件做为icon
如果设置了图标点击回调,则用于按钮内图标的颜色。(笔者试不出color效果!!!)
按钮处于向下(按下)状态时按钮的辅助颜色。
按钮处于向下(按下)状态时按钮的主要颜色。
初始叠加层的中心点与用户触摸事件的生命点相匹配。如果触摸持续足够长的时间,飞溅叠加将扩展以填充按钮区域。如果初始颜色具有透明度,则突出显示和按钮颜色将显示。
如果没设置图标点击回调,则用于按钮内图标的颜色。(笔者试不出disabledColor效果!!!)
点击或以其他方式激活按钮时调用的回调。
如果将其设置为null,则将禁用该按钮。
描述按下按钮时将发生的操作的文本。
当用户长按按钮并用于辅助功能时,将显示此文本。
如下示例『I is IconButton tooltip』
代码:
Widget getIconRow() {
return new Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
new Expanded(flex: 1, child: getIcon()),
new Expanded(flex: 1, child: getIconWithColor()),
new Expanded(flex: 1, child: getImageIcon()),
new Expanded(flex: 1, child: getIconButtonText()),
new Expanded(flex: 1, child: getIconButtonImage())
]);
}
Widget getIcon() {
return Icon(
Icons.backup,
);
}
Widget getIconWithColor() {
return Icon(
Icons.backspace,
color: Colors.blue,
textDirection: TextDirection.ltr,
);
}
Widget getImageIcon() {
return ImageIcon(
AssetImage('images/test.png'),
color: Colors.red,
size: 50,
);
}
Widget getIconButtonText() {
return IconButton(
// onPressed: pressedIconBtn,
icon: getTextRich(),
color: Colors.blue,
iconSize: 50,
highlightColor: Color(0x991B5E20),
splashColor: Color(0x990D47A1),
disabledColor: Color(0xFF0D47A1),
tooltip: "I is IconButton tooltip",
);
}
Widget getIconButtonImage() {
return IconButton(
// onPressed: null,
onPressed: pressedIconBtn,
icon: getImage(),
// color: Colors.blue, // 无用!!!
iconSize: 50,
highlightColor: Color(0x991B5E20),
splashColor: Color(0x990D47A1),
disabledColor: Color(0xFF0D47A1), // 无用!!!
);
}
void pressedIconBtn() {}
Widget getImage() {
return new Image.asset(
'images/test.png',
// width: 300.0,
// height: 300.0,
matchTextDirection: false,
fit: BoxFit.fitWidth,
// repeat: ImageRepeat.repeat,
// filterQuality: FilterQuality.high,
// color: Colors.black,
// colorBlendMode: BlendMode.xor,
);
}
Widget getTextRich() {
List children = new List<TextSpan>();
children.add(TextSpan(text: "Chen", style: TextStyle(color: Colors.black)));
children.add(TextSpan(text: "Ying", style: TextStyle(color: Colors.red)));
children.add(TextSpan(text: "you", style: TextStyle(color: Colors.blue)));
List children1 = new List<TextSpan>();
children1.add(
TextSpan(text: " Is ", style: TextStyle(color: Colors.blueAccent)));
children1.add(
TextSpan(text: "Androider", style: TextStyle(color: Colors.amber)));
children.add(
TextSpan(children: children1, style: TextStyle(color: Colors.blue)));
TextSpan textSpan = new TextSpan(children: children);
return Text.rich(
textSpan,
);
}
https://docs.flutter.io/flutter/widgets/Icon-class.html
https://docs.flutter.io/flutter/material/Icons-class.html
https://docs.flutter.io/flutter/material/IconButton-class.html
sdk源码