【Flutter學習】基本組件之圖標組件Icon

一，概述　　

　　圖標組件（Icon）為展示圖標的組件，該組件不可交互，要實現可交互的圖標，可以考慮使用IconButton組件。
　　 圖標組件相關的幾個組件:

• IconButton:可交互的Icon；
• Icons：框架自帶Icon集合；
• IconTheme：Icon主題；
• ImageIcon：通過AssetImages或者其他圖片顯示Icon。

二，繼承關系

• 　　

  Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Icon

三，構造函數

• Icon組件
  
  • 為展示圖標的組件，不能交互
  • 構造函數
    

     const Icon(IconData icon, {//顯示的圖標
        Key key,
        double size,//圖標尺寸
        Color color,    //圖標顏色
        String semanticLabel,//語義標簽
        TextDirection textDirection,//用戶呈現圖標的文本方向
      })

• 其它
  • IconButton:可交互的Icon；
    
    • IconButton是直接繼承自StatelessWidget的，默認沒有背景
    • 構造函數

    • const IconButton({
          Key key,
          this.iconSize = 24.0,
          this.padding = const EdgeInsets.all(8.0),
          this.alignment = Alignment.center,
          @required this.icon,
          this.color,
          this.highlightColor,
          this.splashColor,
          this.disabledColor,
          @required this.onPressed,
          this.tooltip
        }) 

      　　
  • Icons：框架自帶Icon集合；
    • 官方圖標網站：https://material.io/tools/icons/?icon=account_balance&style=baseline　　
  • IconTheme：Icon主題；
  • ImageIcon：通過AssetImages或者其他圖片顯示Icon。　　　

四，參數詳情

• color　　
  • 類型：Color　　
  • 說明：圖標顏色
• icon　　
  • 類型：IconData
  • 說明：顯示的圖標
• semanticLabel　　
  • 類型：String　　
  • 說明：語義標簽，此標簽不會顯示在UI中
• size
  • 類型：double　　
  • 說明：圖標尺寸
• textDirection　　
  • 類型：TextDirection　　
  • 說明：用戶呈現圖標的文本方向

五，示例demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    const data = "Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep";
    return MaterialApp(
      title: 'Hello World!',
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Fultter'),
        ),
        body: Center(
          child: Icon(
            Icons.build,
            color: Colors.red,
            semanticLabel: "user",
            size: 64.0,
            textDirection: TextDirection.rtl,
          ),
        ),
      ),
    );
  }
}

六，官方文檔

官方文檔--Icon