flutter?material?widget組件之信息展示組件使用詳解
更新時間：2022年08月24日 10:42:58 作者：liuguoxionglang
這篇文章主要為大家詳細介紹了flutter?material?widget組件之信息展示組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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,
通常用 獲取網(wǎng)絡圖片用 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。 它可以將一個復雜內容實體展現(xiàn)在一個小塊中，如聯(lián)系人
Tooltip:一個文本提示工具，幫助解釋一個按鈕或其他用戶界面，當widget長時間按下時（當用戶采取其他適當操作時）顯示一個提示標簽
構造函數(shù)
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,// 是否根據(jù)文本方向繪制圖片
? ? ? ? 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, // 網(wǎng)絡圖片的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回調函數(shù)被設置時，添加此圖標
? ? ? ? this.onDeleted,// 回調函數(shù)，點擊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回調函數(shù)被設置時，添加此圖標
? ? ? ? ? ? ? ? onDeleted: (){
? ? ? ? ? ? ? ? ? print("ondeleted..............");
? ? ? ? ? ? ? ? },// 回調函數(shù)，點擊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
數(shù)據(jù)表顯示原始數(shù)據(jù)集。它們通常出現(xiàn)在桌面企業(yè)產(chǎn)品中。DataTable Widget實現(xiàn)這個組件
構造函數(shù)
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,//此列是否表示數(shù)據(jù)
? ? ? ? this.onSort,//按此列排序時的回調函數(shù)
? ? })
? ? DataRow({
? ? ? ? this.key,
? ? ? ? this.selected = false,//行是否被選中
? ? ? ? this.onSelectChanged,//選中改變時的回調
? ? ? ? @required this.cells,// 行中每個單元的數(shù)據(jù)
? ? })
? ? 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,// 是否數(shù)字
? ? ? ? ? ? ? ? ? ? onSort: (inx,bool){
? ? ? ? ? ? ? ? ? ? ? print("點擊列了。。。。。"+inx.toString()+"...."+bool.toString());
? ? ? ? ? ? ? ? ? ? } //按此列排序時的回調函數(shù)
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? DataColumn(
? ? ? ? ? ? ? ? ? ? label: Text("年齡"),
? ? ? ? ? ? ? ? ? ? numeric: true,
? ? ? ? ? ? ? ? ? ? onSort: (inx,bool){
? ? ? ? ? ? ? ? ? ? ? print("點擊列了。。。。。"+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,// 行是否被選中
? ? ? ? ? ? ? ? ? ? //選中改變時的回調
? ? ? ? ? ? ? ? ? ? onSelectChanged: (val){
? ? ? ? ? ? ? ? ? ? ? print("行被選中......"+val.toString());
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? cells: [
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("飛飛")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("55"),
? ? ? ? ? ? ? ? ? ? ? ? placeholder: false,//子項是否是占位符
? ? ? ? ? ? ? ? ? ? ? ? showEditIcon: true,//是否顯示編輯圖標
? ? ? ? ? ? ? ? ? ? ? ? onTap: (){
? ? ? ? ? ? ? ? ? ? ? ? ? print("此列被編輯了。。。。。。。。。。。");
? ? ? ? ? ? ? ? ? ? ? ? }//點擊編輯圖片時的回調
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? DataCell(
? ? ? ? ? ? ? ? ? ? ? ? Text("騎手")
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? )
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}Card
一個 Material Design 卡片。擁有一個圓角和陰影
構造函數(shù)
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
構造函數(shù)
LinearProgressIndicator({
? ? Key key,
? ? double value, // 指示器的值
? ? Color backgroundColor,//背景顏色
? ? Animation<Color> valueColor,///animation類型的參數(shù)，用來設定進度值的顏色，默認為主題色，指定常數(shù)顏色使用
? ? String semanticsLabel,//語義標簽
? ? String semanticsValue,// 語義值
? })
? CircularProgressIndicator({
? ? Key key,
? ? double value,// 指示器的值
? ? Color backgroundColor,//背景顏色
? ? Animation<Color> valueColor,//animation類型的參數(shù)，用來設定進度值的顏色，默認為主題色，指定常數(shù)顏色使用
? ? 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)
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了在Android中調用WebService實例，有需要的朋友可以了解一下。2016-11-11
Android 檢測鍵盤顯示或隱藏鍵盤的實現(xiàn)代碼
這篇文章主要介紹了Android 檢測鍵盤顯示或隱藏鍵盤的實現(xiàn)代碼的相關資料,需要的朋友可以參考下2017-07-07
植物大戰(zhàn)僵尸小游戲，無論老少皆愛，非常有意思，具有挑戰(zhàn)性，那么基于代碼是怎么實現(xiàn)的呢？下面通過本文給大家介紹Android植物大戰(zhàn)僵尸小游戲，感興趣的朋友一起學習吧2015-12-12
這篇文章文給大家介紹了DiffUtil的使用，相信大家每位Android開發(fā)者們都知道谷歌最近更新了Support Library 24.2.0，而DiffUtil就是在這個版本添加的一個工具類。下面就跟著小編一起來看看，有需要的可以參考借鑒。2016-09-09
Android SQLite數(shù)據(jù)庫連接實現(xiàn)登錄功能
這篇文章主要為大家詳細介紹了Android SQLite數(shù)據(jù)庫連接實現(xiàn)登錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家介紹了Flutter在項目中使用動畫不使用包實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家詳細介紹了android實現(xiàn)歌詞自動滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
Android編程判斷是否連接網(wǎng)絡的方法【W(wǎng)iFi及3G判斷】
這篇文章主要介紹了Android編程判斷是否連接網(wǎng)絡的方法,結合實例形式分析了Android針對WiFi及3G網(wǎng)絡連接的判斷方法,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了Android實現(xiàn)網(wǎng)頁圖片瀏覽功能，輸入圖片的url然后點擊按鈕加載出來圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
詳解android項目由Gradle 2.2 切換到 3.0的坑
本篇文章主要介紹了詳解android項目由Gradle 2.2 切換到 3.0的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02