一,概述  

  图标组件(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集合;
    • 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

【Flutter学习】基本组件之图标组件Icon的更多相关文章

  1. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  2. 07Flutter ListView基础列表组件、水平列表组件、图标组件

    ListView:     ListView:参数     scrollDirection:Axis.horizontal:水平列表.Axis.vertical垂直列表     padding:内边距 ...

  3. ListView 基础列表组件、水平 列表组件、图标组件

    一.Flutter 列表组件概述 列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义 列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显 ...

  4. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  5. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  6. Flutter学习笔记(8)--Dart面向对象

    如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...

  7. 从0搭建Vue3组件库:button组件

    button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...

  8. amazeui学习笔记--css(常用组件6)--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  9. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

随机推荐

  1. redis配置文件详解-3

    redis3.0以上配置文件 #################################INCLUDES ################################### include ...

  2. JAVA Web学习笔记

    JAVA Web学习笔记 1.JSP (java服务器页面) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...

  3. Appium+python自动化-查看app元素属性

    本文转自:https://www.cnblogs.com/yoyoketang/p/7581831.html 前言 学UI自动化首先就是定位页面元素,玩过android版的appium小伙伴应该都知道 ...

  4. 线程同步(基于java)

    java线程 同步与异步 线程池 1)多线程并发时,多个线程同时请求同一个资源,必然导致此资源的数据不安全,A线程修改了B线 程的处理的数据,而B线程又修改了A线程处理的数理.显然这是由于全局资源造成 ...

  5. 自己写一个 wsgi 服务器运行 Django 、Tornado 等框架应用

    https://blog.csdn.net/heybob/article/details/52288006

  6. Linux命令 who

    who :显示当前登入系统的用户信息 显示的内容主要包括: 用户名,登录终端,上线时间,停留时间,动作,UID等 权限:所有使用者 语法: who  [option] ...[ file | arg1 ...

  7. 对业务类进行构造的工厂类BLLFactory

    using System; using System.Collections.Generic; using System.Text; using System.Collections; using W ...

  8. ubuntu+VS code+launch.json+task.json

    1.ubuntu->vs code . 通过官方PPA安装Ubuntu make sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make s ...

  9. 是否有任何python库可以从自然语言中解析日期和时间?

    我正在寻找的是可以将“明天早上6点”或“中午的下一个模拟”转换为适当的日期时间对象. 解决方案 parsedatetime - 能够解析“人类可读”日期/时间表达式的Python模块. #!/usr/ ...

  10. [USACO14MAR]浇地Watering the Fields

    题目描述 Due to a lack of rain, Farmer John wants to build an irrigation system tosend water between his ...