一,概述  

  图标组件(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. leetcode-第14周双周赛-1274-矩形内船只的数目

    题目描述: 自己的提交: # """ # This is Sea's API interface. # You should not implement it, or s ...

  2. SCP-bzoj-4734

    项目编号:bzoj-4734 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 附录: #include <bits/stdc++.h> #define range(i,c,o) f ...

  3. <Jmeter入门不放弃>之<1.认识jmeter>

    大家这里参考学习的时候,我就不在这里配截图了,因为需要你打开工具根据文档自己去找,,才有印象,大家一定要启动JMeter! 一.Jmeter是什么 由 Apache 组织开发,基于JAVA压力测试工具 ...

  4. 使用Microsoft.Practices.Unity 依赖注入 转载https://www.cnblogs.com/slardar1978/p/4205394.html

    Unity是微软Patterns & Practices团队所开发的一个轻量级的,并且可扩展的依赖注入(Dependency Injection)容器,它支持常用的三种依赖注入方式:构造器注入 ...

  5. npm yarn bower (前端必会的工具)

     https://qunitjs.com/  https://www.cnblogs.com/shytong/p/5417789.html 

  6. 2018 ICPC Asia Singapore Regional A. Largest Triangle (计算几何)

    题目链接:Kattis - largesttriangle Description Given \(N\) points on a \(2\)-dimensional space, determine ...

  7. POJ 2001 Shortest Prefixes (Trie)

    题目链接:POJ 2001 Description A prefix of a string is a substring starting at the beginning of the given ...

  8. array排序(按数组中对象的属性进行排序)

    使用array.sort()对数组中对象的属性进行排序 <template> <div> <a @click="sortArray()">降序& ...

  9. Config JAVA evironment for LoadRunner

    1. Install jdk 2. Set system variables eg. JAVA_HOME = C:\Program Files (x86)\Java\jdk1.6.0_43 class ...

  10. Cocos2d-x之Scene

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Scene场景也是cocos2dx中必不可少的元素,游戏中通常我们需要构建不同的场景(至少一个),游戏里关卡.版块的切换也就是一个一个场景 ...