flutter material widget组件之信息展示组件，供大家参考，具体内容如下
widget分为两类：widgets library中的标准widget和Material Components library中的专用widget;任何应用程序都可以使用widgets library中的widget，但只有Material应用程序可以使用Material Components库。其中Card，ListTitle就是Material Components库中的组件。
Image Icon Chip TooltipImage:一个显示图片的widget,
通常用 获取网络图片用 Image.network(String src, {})，
加载本地图片用 Image.asset(String name, {})
从一个file文件获取图片 Image.file(File file, {})
从unit8list获取图片 Image.memory(Uint8List bytes, {})
Icon:a Material Design icon.
Chip:标签，一个Material widget。 它可以将一个复杂内容实体展现在一个小块中，如联系人
Tooltip:一个文本提示工具，帮助解释一个按钮或其他用户界面，当widget长时间按下时（当用户采取其他适当操作时）显示一个提示标签
构造函数
Image({
Key key,
@required this.image,//图片Image对象
this.semanticLabel,// 语义化的标间
this.excludeFromSemantics = false,//控制语义化标签的显示，若为true,则semantiicLabel将被忽略
this.width, // 图片宽
this.height,// 图片高
this.color,// 图片颜色
this.colorBlendMode,//颜色混合模式
this.fit,
this.alignment = Alignment.center,// 居中方式
this.repeat = ImageRepeat.noRepeat,// 图片是否重复平铺
this.centerSlice,//
this.matchTextDirection = false,// 是否根据文本方向绘制图片
this.gaplessPlayback = false,// 若为真，更新时还是显示原图像，否则不显示任何内容
this.filterQuality = FilterQuality.low,//滤镜质量
})
Image.asset(
String name, // 本地图片名
{
Key key,
AssetBundle bundle,
this.semanticLabel,
this.excludeFromSemantics = false,
double scale,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
String package,
this.filterQuality = FilterQuality.low,
}
),
Image.network(
String src, // 网络图片的url路径
{
Key key,
double scale = 1.0,//缩放比例
this.semanticLabel,
this.excludeFromSemantics = false,//控制语义化标签的显示，若为true,则semantiicLabel将被忽略
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,// 图片适配容器的方式，相当于css中的backgrou-iamge-size,有BoxFit.fill,contain,cover等值
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,// 中心切片 ？？
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
Map<String, String> headers,
}
)
Icon(
this.icon, // 要显示的图标
{
Key key,
this.size,//图标大小
this.color,//图标颜色
this.semanticLabel,//语义化标签
this.textDirection,// 文本方向
}
)
Chip({
Key key,
this.avatar,//通常将头像，图片之类的信息放在此widget中
@required this.label,//标签
this.labelStyle,//标签样式
this.labelPadding,//标签内边距
this.deleteIcon,//当onDeleted回调函数被设置时，添加此图标
this.onDeleted,// 回调函数，点击deleteIcon时的回调
this.deleteIconColor,//deleteIcon的颜色
this.deleteButtonTooltipMessage,//长按删除button的提示信息
this.shape,//形状
this.clipBehavior = Clip.none,//剪切方式
this.backgroundColor,//背景色
this.padding,//内边距
this.materialTapTargetSize,//材质匹配目标大小
})
Tooltip({
Key key,
@required this.message, //长按提示框中的内容
this.height = 32.0,// 此提示框的高
this.padding = const EdgeInsets.symmetric(horizontal: 16.0),//提示框的内边距
this.verticalOffset = 24.0,//提示框距离小部件的垂直偏移
this.preferBelow = true,//提示是否默认显示在小部件下面
this.excludeFromSemantics = false,//是否从语义树中排出提示信息
this.child,// 长按的小部件
})
应用示例
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Center(
child: Column(
children: <Widget>[
new Image.network(
'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.webp',
// 缩放比例
scale: 6.0,
),
new Image.asset("assets/images/2.webp"),
Icon(
Icons.ac_unit,
color: Colors.blue,//图标颜色
size: 30,//图标大小
semanticLabel: "icon演示",//语义化标签,好像没卵用？？
textDirection: TextDirection.ltr,// 文本方向
),
Chip(
// 通常将头像，图片之类的信息放在此widget中
avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: Text('AB'),
),
label: Text('chip label'),//标签
labelStyle: TextStyle(color: Colors.red),//标签样式
deleteIcon: Icon(Icons.add),//当onDeleted回调函数被设置时，添加此图标
onDeleted: (){
print("ondeleted..............");
},// 回调函数，点击deleteIcon时的回调
deleteIconColor: Colors.green,//deleteIcon的颜色
deleteButtonTooltipMessage: "aaaa",//长按删除button的提示信息
backgroundColor: Colors.greenAccent,//背景色
),
Tooltip(
message: "提示信息",//长按提示框中的内容
height: 50,// 此提示框的高
padding: EdgeInsets.all(12),//提示框的内边距
verticalOffset:60,//提示框距离小部件的垂直偏移 此处向下偏移60
preferBelow: true,//提示是否默认显示在小部件下面
excludeFromSemantics: true,//是否从语义树中排出提示信息
child: Text("data"),// 长按的小部件
),
],
),
),
),
);
}
}
DataTable
数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件
构造函数
DataTable({
Key key,
@required this.columns,// 各列配置
this.sortColumnIndex,//排序列的键
this.sortAscending = true,//有排序列的话，默认升序排序
this.onSelectAll,// 选中行是的回调
@required this.rows,// 各行配置
})
DataColumn({
@required this.label,//列标题
this.tooltip,//长按列标题提示
this.numeric = false,//此列是否表示数据
this.onSort,//按此列排序时的回调函数
})
DataRow({
this.key,
this.selected = false,//行是否被选中
this.onSelectChanged,//选中改变时的回调
@required this.cells,// 行中每个单元的数据
})
DataCell(
this.child,
{
this.placeholder = false,//子项是否是占位符
this.showEditIcon = false,//是否显示编辑图标
this.onTap,//点击编辑图片时的回调
}
)
应用示例
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Center(
child: Column(
children: <Widget>[
DataTable(
columns: [
DataColumn(
label: Text("姓名"),//列标题
tooltip: "name",//长按列标题提示
numeric: false,// 是否数字
onSort: (inx,bool){
print("点击列了。。。。。"+inx.toString()+"...."+bool.toString());
} //按此列排序时的回调函数
),
DataColumn(
label: Text("年龄"),
numeric: true,
onSort: (inx,bool){
print("点击列了。。。。。"+inx.toString()+"...."+bool.toString());
}
),
DataColumn(
label: Text("职业")
),
],
rows: [
DataRow(
cells: [
DataCell(
Text("张三")
),
DataCell(
Text("15")
),
DataCell(
Text("乡长")
),
]
),
DataRow(
cells: [
DataCell(
Text("李四")
),
DataCell(
Text("95")
),
DataCell(
Text("鼓手")
),
]
),
DataRow(
selected: true,// 行是否被选中
//选中改变时的回调
onSelectChanged: (val){
print("行被选中......"+val.toString());
},
cells: [
DataCell(
Text("飞飞")
),
DataCell(
Text("55"),
placeholder: false,//子项是否是占位符
showEditIcon: true,//是否显示编辑图标
onTap: (){
print("此列被编辑了。。。。。。。。。。。");
}//点击编辑图片时的回调
),
DataCell(
Text("骑手")
),
]
),
],
)
],
),
),
),
);
}
}
Card
一个 Material Design 卡片。拥有一个圆角和阴影
构造函数
Card({
Key key,
this.color, // 颜色
this.elevation,// z坐标轴坐标
this.shape,//形状
this.margin = const EdgeInsets.all(4.0),//外边距
this.clipBehavior = Clip.none,//剪切方式
this.child,//子组件
this.semanticContainer = true,//此部件是否为单个语义容器
})
应用示例
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Center(
child: Column(
children: <Widget>[
Card(
// 子项
child: Container(child: Text("data"),),
// 颜色
color: Colors.green,
// 外边距
margin: EdgeInsets.all(55),
// z轴坐标 没卵用啊
elevation: 55,
// 形状
shape: Border.all(color: Colors.red),
// 布尔型，好像也没卵用
semanticContainer: false,
clipBehavior: Clip.antiAliasWithSaveLayer,
)
],
),
),
),
);
}
}
LinearProgressIndicator
一个线性进度条，另外还有一个圆形进度条CircularProgressIndicator
构造函数
LinearProgressIndicator({
Key key,
double value, // 指示器的值
Color backgroundColor,//背景颜色
Animation<Color> valueColor,///animation类型的参数，用来设定进度值的颜色，默认为主题色，指定常数颜色使用
String semanticsLabel,//语义标签
String semanticsValue,// 语义值
})
CircularProgressIndicator({
Key key,
double value,// 指示器的值
Color backgroundColor,//背景颜色
Animation<Color> valueColor,//animation类型的参数，用来设定进度值的颜色，默认为主题色，指定常数颜色使用
this.strokeWidth = 4.0,// 指示器线宽
String semanticsLabel,
String semanticsValue,
})
应用示例
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Column(
children: <Widget>[
LinearProgressIndicator(
value: 0.6,// 指示器的进度值
backgroundColor: Colors.greenAccent,//轨道背景颜色
semanticsLabel: "60%",
semanticsValue: "6",
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),// 进图条动画颜色
// valueColor: CurvedAnimation(),
),
Text("圆形指示器"),
CircularProgressIndicator(
value: 0.5,
backgroundColor: Colors.black,// 背景色没有起作用？？
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)
),
],
),
),
);
}
}