一,概述  

  图标组件(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. amazeui学习笔记--css(常用组件6)--图标Icon

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

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

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

  8. Flutter学习笔记(18)--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

  9. Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

随机推荐

  1. JAVA 1.6 流程控制语句

    1. 条件运算符(三元表达式),其形式为:type d = a ? b : c; 具体化形式为:int d = 2 < 1 ? 3 : 4;2. 轻量级的文本编辑器:UltraEdit.Edit ...

  2. August 10th, 2016, Week 33rd, Wednesday

    The degree of loving is measured by the degree of giving. 爱的深浅是用给与的多少来衡量的. Some say that if you love ...

  3. js和 jquery对象

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’ ...

  4. WPF 绑定一(数据源为控件)

    xaml: <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.co ...

  5. SQL Server 2008 查询所有用户表

    SQL Server 2008 查询所有用户表的T-SQL语句是: SELECT * FROM sysobjects WHERE [xtype] = 'U' 或者是: SELECT * FROM sy ...

  6. c++(八皇后)

    八皇后是一道很具典型性的题目.它的基本要求是这样的:在一个8*8的矩阵上面放置8个物体,一个矩阵点只允许放置一个物体,任意两个点不能在一行上,也不能在一列上,不能在一条左斜线上,当然也不能在一条右斜线 ...

  7. linux下Tomcat进程shutdown不完全--解决方案

    Kill进程,修改tomcat bin目录下shutdown.sh和catalina.sh文件 忽略日志中的严重警告,因为这是关闭tomcat时候引起的,正常情况下不会发生这种内存泄露情况,而且Tom ...

  8. git强制提交本地分支覆盖远程分支

    git push origin 分支名 --force eg: cd 代码目录 git push origin master --force 运行结果: Total 0 (delta 0), reus ...

  9. xrdp完美实现Windows远程访问Ubuntu 16.04

    前言: 在很多场景下,我们需要远程连接到Linux服务器(本文是Ubuntu),传统的连接主要分为两种. 第一种:通过SSH服务(使用xshell等工具)来远程访问,编写终端命令,不过这个是无界面的, ...

  10. 新手通过SVN向eclipse中导入项目注意事项

    该文章进行的前提是,jdk.eclipse.tomcat.maven已安装完成 要从svn上获取项目数据,首先要安装svn 1)通过help->installsoft->svn->a ...