【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集合;
- IconTheme:Icon主题;
- ImageIcon:通过AssetImages或者其他图片显示Icon。
- IconButton:可交互的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的更多相关文章
- Flutter学习笔记(9)--组件Widget
如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...
- 07Flutter ListView基础列表组件、水平列表组件、图标组件
ListView: ListView:参数 scrollDirection:Axis.horizontal:水平列表.Axis.vertical垂直列表 padding:内边距 ...
- ListView 基础列表组件、水平 列表组件、图标组件
一.Flutter 列表组件概述 列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义 列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显 ...
- Flutter学习笔记(11)--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- Flutter学习笔记(10)--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
- Flutter学习笔记(8)--Dart面向对象
如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...
- 从0搭建Vue3组件库:button组件
button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...
随机推荐
- redis配置文件详解-3
redis3.0以上配置文件 #################################INCLUDES ################################### include ...
- JAVA Web学习笔记
JAVA Web学习笔记 1.JSP (java服务器页面) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...
- Appium+python自动化-查看app元素属性
本文转自:https://www.cnblogs.com/yoyoketang/p/7581831.html 前言 学UI自动化首先就是定位页面元素,玩过android版的appium小伙伴应该都知道 ...
- 线程同步(基于java)
java线程 同步与异步 线程池 1)多线程并发时,多个线程同时请求同一个资源,必然导致此资源的数据不安全,A线程修改了B线 程的处理的数据,而B线程又修改了A线程处理的数理.显然这是由于全局资源造成 ...
- 自己写一个 wsgi 服务器运行 Django 、Tornado 等框架应用
https://blog.csdn.net/heybob/article/details/52288006
- Linux命令 who
who :显示当前登入系统的用户信息 显示的内容主要包括: 用户名,登录终端,上线时间,停留时间,动作,UID等 权限:所有使用者 语法: who [option] ...[ file | arg1 ...
- 对业务类进行构造的工厂类BLLFactory
using System; using System.Collections.Generic; using System.Text; using System.Collections; using W ...
- ubuntu+VS code+launch.json+task.json
1.ubuntu->vs code . 通过官方PPA安装Ubuntu make sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make s ...
- 是否有任何python库可以从自然语言中解析日期和时间?
我正在寻找的是可以将“明天早上6点”或“中午的下一个模拟”转换为适当的日期时间对象. 解决方案 parsedatetime - 能够解析“人类可读”日期/时间表达式的Python模块. #!/usr/ ...
- [USACO14MAR]浇地Watering the Fields
题目描述 Due to a lack of rain, Farmer John wants to build an irrigation system tosend water between his ...