flutter?material?widget組件之信息展示組件使用詳解

更新時間：2022年08月24日 10:42:58 作者：liuguoxionglang

這篇文章主要為大家詳細(xì)介紹了flutter?material?widget組件之信息展示組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

flutter material widget組件之信息展示組件，供大家參考，具體內(nèi)容如下

widget分為兩類：widgets library中的標(biāo)準(zhǔn)widget和Material Components library中的專用widget;任何應(yīng)用程序都可以使用widgets library中的widget，但只有Material應(yīng)用程序可以使用Material Components庫。其中Card，ListTitle就是Material Components庫中的組件。

Image Icon Chip Tooltip

Image:一個顯示圖片的widget,
通常用獲取網(wǎng)絡(luò)圖片用 Image.network(String src, {})，
加載本地圖片用 Image.asset(String name, {})
從一個file文件獲取圖片 Image.file(File file, {})
從unit8list獲取圖片 Image.memory(Uint8List bytes, {})
Icon:a Material Design icon.
Chip:標(biāo)簽，一個Material widget。它可以將一個復(fù)雜內(nèi)容實(shí)體展現(xiàn)在一個小塊中，如聯(lián)系人
Tooltip:一個文本提示工具，幫助解釋一個按鈕或其他用戶界面，當(dāng)widget長時間按下時（當(dāng)用戶采取其他適當(dāng)操作時）顯示一個提示標(biāo)簽

構(gòu)造函數(shù)

Image({
? ? ? ? Key key,
? ? ? ? @required this.image,//圖片Image對象
? ? ? ? this.semanticLabel,// 語義化的標(biāo)間
? ? ? ? this.excludeFromSemantics = false,//控制語義化標(biāo)簽的顯示，若為true,則semantiicLabel將被忽略
? ? ? ? this.width, // 圖片寬
? ? ? ? this.height,// 圖片高
? ? ? ? this.color,// 圖片顏色
? ? ? ? this.colorBlendMode,//顏色混合模式
? ? ? ? this.fit,
? ? ? ? this.alignment = Alignment.center,// 居中方式
? ? ? ? this.repeat = ImageRepeat.noRepeat,// 圖片是否重復(fù)平鋪
? ? ? ? this.centerSlice,//
? ? ? ? this.matchTextDirection = false,// 是否根據(jù)文本方向繪制圖片
? ? ? ? this.gaplessPlayback = false,// 若為真，更新時還是顯示原圖像，否則不顯示任何內(nèi)容
? ? ? ? this.filterQuality = FilterQuality.low,//濾鏡質(zhì)量
? ? })
? ? ?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, // 網(wǎng)絡(luò)圖片的url路徑
? ? ? ? {
? ? ? ? ? ? Key key,
? ? ? ? ? ? double scale = 1.0,//縮放比例
? ? ? ? ? ? this.semanticLabel,
? ? ? ? ? ? this.excludeFromSemantics = false,//控制語義化標(biāo)簽的顯示，若為true,則semantiicLabel將被忽略
? ? ? ? ? ? this.width,
? ? ? ? ? ? this.height,
? ? ? ? ? ? this.color,
? ? ? ? ? ? this.colorBlendMode,
? ? ? ? ? ? this.fit,// 圖片適配容器的方式，相當(dāng)于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, // 要顯示的圖標(biāo)
? ? ? ? {
? ? ? ? ? ? Key key,
? ? ? ? ? ? this.size,//圖標(biāo)大小
? ? ? ? ? ? this.color,//圖標(biāo)顏色
? ? ? ? ? ? this.semanticLabel,//語義化標(biāo)簽
? ? ? ? ? ? this.textDirection,// 文本方向
? ? ? ? }
? ? )
? ? Chip({
? ? ? ? Key key,
? ? ? ? this.avatar,//通常將頭像，圖片之類的信息放在此widget中
? ? ? ? @required this.label,//標(biāo)簽
? ? ? ? this.labelStyle,//標(biāo)簽樣式
? ? ? ? this.labelPadding,//標(biāo)簽內(nèi)邊距
? ? ? ? this.deleteIcon,//當(dāng)onDeleted回調(diào)函數(shù)被設(shè)置時，添加此圖標(biāo)
? ? ? ? this.onDeleted,// 回調(diào)函數(shù)，點(diǎn)擊deleteIcon時的回調(diào)
? ? ? ? this.deleteIconColor,//deleteIcon的顏色
? ? ? ? this.deleteButtonTooltipMessage,//長按刪除button的提示信息
? ? ? ? this.shape,//形狀
? ? ? ? this.clipBehavior = Clip.none,//剪切方式
? ? ? ? this.backgroundColor,//背景色
? ? ? ? this.padding,//內(nèi)邊距
? ? ? ? this.materialTapTargetSize,//材質(zhì)匹配目標(biāo)大小
? ? })?
? ? Tooltip({
? ? ? ? Key key,
? ? ? ? @required this.message, //長按提示框中的內(nèi)容
? ? ? ? this.height = 32.0,// 此提示框的高
? ? ? ? this.padding = const EdgeInsets.symmetric(horizontal: 16.0),//提示框的內(nèi)邊距
? ? ? ? this.verticalOffset = 24.0,//提示框距離小部件的垂直偏移
? ? ? ? this.preferBelow = true,//提示是否默認(rèn)顯示在小部件下面
? ? ? ? this.excludeFromSemantics = false,//是否從語義樹中排出提示信息
? ? ? ? this.child,// 長按的小部件
? ? })?

應(yīng)用示例

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,//圖標(biāo)顏色
? ? ? ? ? ? ? ? size: 30,//圖標(biāo)大小
? ? ? ? ? ? ? ? semanticLabel: "icon演示",//語義化標(biāo)簽,好像沒卵用？？
? ? ? ? ? ? ? ? textDirection: TextDirection.ltr,// 文本方向
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ),
? ? ? ? ? ? ? Chip(
? ? ? ? ? ? ? ? // 通常將頭像，圖片之類的信息放在此widget中
? ? ? ? ? ? ? ? avatar: ?CircleAvatar(
? ? ? ? ? ? ? ? ? backgroundColor: Colors.grey.shade800,
? ? ? ? ? ? ? ? ? child: Text('AB'),
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? label: Text('chip label'),//標(biāo)簽
? ? ? ? ? ? ? ? labelStyle: TextStyle(color: Colors.red),//標(biāo)簽樣式
? ? ? ? ? ? ? ? deleteIcon: Icon(Icons.add),//當(dāng)onDeleted回調(diào)函數(shù)被設(shè)置時，添加此圖標(biāo)
? ? ? ? ? ? ? ? onDeleted: (){
? ? ? ? ? ? ? ? ? print("ondeleted..............");
? ? ? ? ? ? ? ? },// 回調(diào)函數(shù)，點(diǎn)擊deleteIcon時的回調(diào)
? ? ? ? ? ? ? ? deleteIconColor: Colors.green,//deleteIcon的顏色
? ? ? ? ? ? ? ? deleteButtonTooltipMessage: "aaaa",//長按刪除button的提示信息
? ? ? ? ? ? ? ? backgroundColor: Colors.greenAccent,//背景色
? ? ? ? ? ? ? ),

? ? ? ? ? ? ? Tooltip(
? ? ? ? ? ? ? ? message: "提示信息",//長按提示框中的內(nèi)容
? ? ? ? ? ? ? ? height: 50,// 此提示框的高
? ? ? ? ? ? ? ? padding: EdgeInsets.all(12),//提示框的內(nèi)邊距
? ? ? ? ? ? ? ? verticalOffset:60,//提示框距離小部件的垂直偏移 此處向下偏移60
? ? ? ? ? ? ? ? preferBelow: true,//提示是否默認(rèn)顯示在小部件下面
? ? ? ? ? ? ? ? excludeFromSemantics: true,//是否從語義樹中排出提示信息
? ? ? ? ? ? ? ? child: Text("data"),// 長按的小部件
? ? ? ? ? ? ? ),
? ? ? ? ? ? ??
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}

DataTable

數(shù)據(jù)表顯示原始數(shù)據(jù)集。它們通常出現(xiàn)在桌面企業(yè)產(chǎn)品中。DataTable Widget實(shí)現(xiàn)這個組件

構(gòu)造函數(shù)

DataTable({
? ? ? ? Key key,
? ? ? ? @required this.columns,// 各列配置
? ? ? ? this.sortColumnIndex,//排序列的鍵
? ? ? ? this.sortAscending = true,//有排序列的話，默認(rèn)升序排序
? ? ? ? this.onSelectAll,// 選中行是的回調(diào)
? ? ? ? @required this.rows,// 各行配置
? ? })

? ? DataColumn({
? ? ? ? @required this.label,//列標(biāo)題
? ? ? ? this.tooltip,//長按列標(biāo)題提示
? ? ? ? this.numeric = false,//此列是否表示數(shù)據(jù)
? ? ? ? this.onSort,//按此列排序時的回調(diào)函數(shù)
? ? })
? ? DataRow({
? ? ? ? this.key,
? ? ? ? this.selected = false,//行是否被選中
? ? ? ? this.onSelectChanged,//選中改變時的回調(diào)
? ? ? ? @required this.cells,// 行中每個單元的數(shù)據(jù)
? ? })
? ? DataCell(
? ? ? ? this.child,
? ? ? ? {
? ? ? ? ? ? this.placeholder = false,//子項(xiàng)是否是占位符
? ? ? ? ? ? this.showEditIcon = false,//是否顯示編輯圖標(biāo)
? ? ? ? ? ? this.onTap,//點(diǎn)擊編輯圖片時的回調(diào)
? ? ? ? }
? ? ) ?

應(yīng)用示例

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("姓名"),//列標(biāo)題
? ? ? ? ? ? ? ? ? ? tooltip: "name",//長按列標(biāo)題提示
? ? ? ? ? ? ? ? ? ? numeric: false,// 是否數(shù)字
? ? ? ? ? ? ? ? ? ? onSort: (inx,bool){
? ? ? ? ? ? ? ? ? ? ? print("點(diǎn)擊列了。。。。。"+inx.toString()+"...."+bool.toString());
? ? ? ? ? ? ? ? ? ? } //按此列排序時的回調(diào)函數(shù)
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? DataColumn(
? ? ? ? ? ? ? ? ? ? label: Text("年齡"),
? ? ? ? ? ? ? ? ? ? numeric: true,
? ? ? ? ? ? ? ? ? ? onSort: (inx,bool){
? ? ? ? ? ? ? ? ? ? ? print("點(diǎn)擊列了。。。。。"+inx.toString()+"...."+bool.toString());
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? DataColumn(
? ? ? ? ? ? ? ? ? ? label: Text("職業(yè)")
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? rows: [
? ? ? ? ? ? ? ? ? DataRow(
? ? ? ? ? ? ? ? ? ? cells: [
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("張三")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("15")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("鄉(xiāng)長")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? DataRow(
? ? ? ? ? ? ? ? ? ? cells: [
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("李四")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("95")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("鼓手")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? DataRow(
? ? ? ? ? ? ? ? ? ? selected: true,// 行是否被選中
? ? ? ? ? ? ? ? ? ? //選中改變時的回調(diào)
? ? ? ? ? ? ? ? ? ? onSelectChanged: (val){
? ? ? ? ? ? ? ? ? ? ? print("行被選中......"+val.toString());
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? cells: [
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("飛飛")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("55"),
? ? ? ? ? ? ? ? ? ? ? ? placeholder: false,//子項(xiàng)是否是占位符
? ? ? ? ? ? ? ? ? ? ? ? showEditIcon: true,//是否顯示編輯圖標(biāo)
? ? ? ? ? ? ? ? ? ? ? ? onTap: (){
? ? ? ? ? ? ? ? ? ? ? ? ? print("此列被編輯了。。。。。。。。。。。");
? ? ? ? ? ? ? ? ? ? ? ? }//點(diǎn)擊編輯圖片時的回調(diào)
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("騎手")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ],

? ? ? ? ? ? ? )
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}

Card

一個 Material Design 卡片。擁有一個圓角和陰影

構(gòu)造函數(shù)

Card({
? ? Key key,
? ? this.color, // 顏色
? ? this.elevation,// z坐標(biāo)軸坐標(biāo)
? ? this.shape,//形狀
? ? this.margin = const EdgeInsets.all(4.0),//外邊距
? ? this.clipBehavior = Clip.none,//剪切方式
? ? this.child,//子組件
? ? this.semanticContainer = true,//此部件是否為單個語義容器
? })

應(yīng)用示例

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(
? ? ? ? ? ? ? ? // 子項(xiàng)
? ? ? ? ? ? ? ? child: Container(child: Text("data"),),
? ? ? ? ? ? ? ? // 顏色
? ? ? ? ? ? ? ? color: Colors.green,
? ? ? ? ? ? ? ? // 外邊距
? ? ? ? ? ? ? ? margin: EdgeInsets.all(55),
? ? ? ? ? ? ? ? // z軸坐標(biāo) ?沒卵用啊
? ? ? ? ? ? ? ? elevation: 55,
? ? ? ? ? ? ? ? // 形狀
? ? ? ? ? ? ? ? shape: ?Border.all(color: Colors.red),
? ? ? ? ? ? ? ? // 布爾型，好像也沒卵用
? ? ? ? ? ? ? ? semanticContainer: false,
? ? ? ? ? ? ? ? clipBehavior: Clip.antiAliasWithSaveLayer,

? ? ? ? ? ? ? )
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}

LinearProgressIndicator

一個線性進(jìn)度條，另外還有一個圓形進(jìn)度條CircularProgressIndicator

構(gòu)造函數(shù)

LinearProgressIndicator({
? ? Key key,
? ? double value, // 指示器的值
? ? Color backgroundColor,//背景顏色
? ? Animation<Color> valueColor,///animation類型的參數(shù)，用來設(shè)定進(jìn)度值的顏色，默認(rèn)為主題色，指定常數(shù)顏色使用
? ? String semanticsLabel,//語義標(biāo)簽
? ? String semanticsValue,// 語義值
? })
? CircularProgressIndicator({
? ? Key key,
? ? double value,// 指示器的值
? ? Color backgroundColor,//背景顏色
? ? Animation<Color> valueColor,//animation類型的參數(shù)，用來設(shè)定進(jìn)度值的顏色，默認(rèn)為主題色，指定常數(shù)顏色使用
? ? this.strokeWidth = 4.0,// 指示器線寬
? ? String semanticsLabel,
? ? String semanticsValue,
? })

應(yīng)用示例

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,// 指示器的進(jìn)度值
? ? ? ? ? ? ? backgroundColor: Colors.greenAccent,//軌道背景顏色
? ? ? ? ? ? ? semanticsLabel: "60%",
? ? ? ? ? ? ? semanticsValue: "6",
? ? ? ? ? ? ? valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),// 進(jìn)圖條動畫顏色
? ? ? ? ? ? ? // valueColor: CurvedAnimation(),
? ? ? ? ? ? ),
? ? ? ? ? ? Text("圓形指示器"),
? ? ? ? ? ? CircularProgressIndicator(
? ? ? ? ? ? ? value: 0.5,
? ? ? ? ? ? ? backgroundColor: Colors.black,// 背景色沒有起作用？？
? ? ? ? ? ? ? valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)
? ? ? ? ? ? ),

? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: