日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

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

作者:liuguoxionglang ? 更新時間: 2022-10-20 編程語言

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

欄目分類
最近更新