flutter material widget组件之信息展示组件使用详解
作者：liuguoxionglang 发布时间：2023-06-22 08:45:35
标签：flutter,信息展示
flutter material widget组件之信息展示组件，供大家参考，具体内容如下
widget分为两类：widgets library中的标准widget和Material Components library中的专用widget;任何应用程序都可以使用widgets library中的widget，但只有Material应用程序可以使用Material Components库。其中Card，ListTitle就是Material Components库中的组件。
Image Icon Chip Tooltip
Image:一个显示图片的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.jpg',
// 缩放比例
scale: 6.0,
),
new Image.asset("assets/images/2.jpg"),
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)
),
],
),
),
);
}
}
来源：https://blog.csdn.net/liuguoxionglang/article/details/100876174
0
投稿猜你喜欢
- /*同步函数当函数中的代码全部放在了同步代码块中，那么这个函数就是同步函数*///同步函数的锁是this锁，this是一个引用，this指向
蓝牙，时下最流行的智能设备传输数据的方式之一，通过手机app和智能设备进行连接，获取设备上的测量数据，我们生活中随处可见的比如蓝牙智能手环，- 这个东西我已经用了有段时间了，从开始写文章就在用这个，主要原因还是因为我比较懒。懒得去寻找图片，同时又怕万一惹来版权争议。。。跟我所有的文章
- 一、什么是Websocket？1.WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）2.它实
- 登陆是系统最基础的功能之一。这么长时间了，一直在写业务，这个基础功能反而没怎么好好研究，都忘差不多了。今天没事儿就来撸一下。以目前在接触和学
- 实现的功能1.导入非xls和xlsx格式的文件2.导入空数据的excel文件3.数据缺失4.导入的excel文件中有重复的数据5.导入的ex
- 一、Shiro整体概述1.简介Apache Shiro是Java的一个安全框架,功能强大,使用简单,Shiro为开发人员提供了一个直观而全面
- 一、关联映射举例关系说明数据库创建表，student，teacher关系说明：一个老师可以有多个学生一个学生只有一个老师一个老师对学生：一对
- 进度条以一种客观化的方式，让我们知道程序正在执行的情况，在程序需要时间执行任务的时候，提示进度条友好的告诉用户说，当前任务还没有完成，请稍稍
- 本文主要为大家分析了图书商城的用户模块，具体内容如下1、用户模块的相关类创建domain：Userdao：UserDaoservice：Us
- 简介：本文将帮助您使用 Spring Boot 创建简单的 REST 服务。你将学习什么是 REST 服务？如何使用 Spring Init
- 本文实例为大家分享了java文件上传下载的具体代码，供大家参考，具体内容如下文件上传@RequestMapping(value="
- 这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改，改为进度圆心进度条，效果如图所示TasksCompletedView.
- 在C#的数字运算过程中，有时候针对十进制decimal类型的计算需要保留2位有效小数，针对decimal变量保留2位有效小数有多种方法，可以
- private static char[] constant = &
- 一、介绍Spring是通过任务执行器(TaskExecutor)来实现多线程和并发编程，使用Spring提供的ThreadPoolTaskE
- DSL的作用是解决领域专家与软件开发人员之间的沟通问题。听起来很唬人，其实不是什么高深的东西，我们可以使用Fluent API 创建自己的D
- 本文实例为大家分享了Flutter投票组件的使用方法，供大家参考，具体内容如下前景基于公司项目需求，仿照微博实现投票功能。开发遇到的问题1.
- 前言我们在实际项目中，除了会碰到一对一的情况，还有一对多的情况，比如一个用户可以有多辆车，而一辆车只能有一个用户等等，今天我们就来一起学习下
- 偶然在项目中用到播放视频时，需要横屏将视频全屏播放，所以需要监听屏幕的横竖屏切换事件。横竖屏切换监听效果： ConfigChang
