【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