flutter material widget元件之資訊展示元件使用詳解

2022-08-24 14:02:13

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(
                'https://s3.ap-northeast-1.wasabisys.com/img.it145.com/202208/20130828161137-1346445960eophnvdv3zd.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)
            ),

          ],
        ),
      ),
    );
  }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

flutter material widget元件之資訊展示元件使用詳解

Image Icon Chip Tooltip

DataTable

Card

LinearProgressIndicator

熱門文章