網站首頁 編程語言 正文
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
相關推薦
- 2022-07-21 解決win10系統網絡連接正常,但是網頁打不開的問題
- 2023-07-13 遍歷對象并改變對象某個屬性的值
- 2022-10-09 C#實現折半查找算法_C#教程
- 2022-12-14 Android?MaterialAlertDialogBuilder修改按鈕屬性_Android
- 2022-07-03 C語言詳解strcmp函數的分析及實現_C 語言
- 2023-11-13 matplotlib圖例(legend)如何自由設置其位置、大小以及樣式
- 2022-12-08 C語言中-a++和-++a運算順序實例解析_C 語言
- 2022-09-15 Android?Jetpack庫剖析之Lifecycle組件篇_Android
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支