【Flutter学习】基本组件之图标组件Icon
2024-08-25 22:30:11
一，概述
图标组件（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
最新文章
- django pdb
- 为 Xamarin.Forms 做个跑马灯控件
- CLR via C#深解笔记七 - 自动内存管理（垃圾回收）
- php基础32：正则匹配-修饰符
- ASP.NET MVC Controller Session问题
- 微信公开课（北京站）速记 微信、微信支付、O2O的定义与关联
- Vmware下Ubuntu无法上网的问题
- 关于LINQ一个简单例子
- Spring两种实现AOP的方式
- 洛谷P1220 关路灯
- Spring Ioc知识整理
- 主流JavaScript框架（Dojo、Google Closure、jQuery、Prototype、Mootools和YUI）的分析和对比
- 【SICP归纳】2 高阶函数和数据抽象
- 初入ubuntu
- 《Linux命令行与shell脚本编程大全》- 读书笔记2 - 更多的bash shell命令
- BZOJ4621 Tc605（动态规划）
- WebLogic使用总结(一)——WebLogic安装
- JavaSE基础知识（4）—数组的应用
- VMMAP的简单使用
- 使用自定义端口连接SQL Server 的方法