Flutter 中使用 ICON

Flutter Icon URL : https://fonts.google.com/icons:

image.png

在Flutter中使用 Icon 步骤如下:

导入图标库

在Dart 文件中导入 material.dart 包,该包包含了 Flutter 的图标库。

import 'package:flutter/material.dart';

使用图标组件

通过 Icon 来创建图标组件,Icon 组件接受一个 IconData 对象作为参数,用于指定要显示的具体图标。
具体图标可以去 该网站找,然后复制对应的 Icon name 即可。
image.png
Icon 参数:如下

Icon(IconData? icon, {Key? key,double? size,double? fill,double? weight,double? grade,double? opticalSize,Color? color,List<Shadow>? shadows,String? semanticLabel,TextDirection? textDirection,
})
  • color:设置图标的颜色。
  • size:设置图标的大小。
  • semanticLabel:设置图标的语义标签,用于辅助功能。

完整示例:

Icon(Icons.favorite, // 使用预定义的图标名称size: 30.0, // 设置图标大小为 30.0 像素semanticLabel: 'Accessibility', // 设置语义标签为 "Accessibility"textDirection: TextDirection.rtl, // 设置文本方向为从右到左
)

使用示例:
image.png

Row(children: [Container(width: 80.0,child:Column(children: [Icon(Icons.favorite,color: Colors.red,size: 24.0,semanticLabel: 'Favorite',),Text("Love",style: TextStyle(fontSize: 17,color:Colors.green,)),],),),Container(width: 80.0,child:Column(children: [Icon(Icons.android_outlined,color: Color.fromARGB(255, 18, 161, 238),size: 24.0,semanticLabel: 'Favorite',),Text("Android",style: TextStyle(fontSize: 17,color:Colors.green,)),],),),Container(width: 80,child:Column(children: [Icon(Icons.verified_outlined,color: Color.fromARGB(255, 9, 232, 69),size: 24.0,semanticLabel: 'Favorite',),Text("Verified",style: TextStyle(fontSize: 17,color:Colors.green,)),],),),],),

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/315363.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT登录功能开发

登录功能 1选择无按钮的dialog 2登录函数 #include <QApplication> #include <QDialog> #include <QFormLayout> #include <QLineEdit> #include <QPushButton> #include <QMessageBox>class LoginDialog : public QDialog { public:Log…

反转链表、链表的中间结点、合并两个有序链表【LeetCode刷题日志】

一、反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路一&#xff1a;翻转单链表指针方向 这里解释一下三个指针的作用&#xff1a; n1&#xff1…

C#核心学习(面向对象)

目录 封装构造函数基本概念&#xff1a;写法&#xff1a;特殊写法注意&#xff1a; 析构函数基本语法 垃圾回收机制&#xff08;GC&#xff0c;Garbage Collector&#xff09;回收算法C# 中内存回收原理自动回收步骤注意 手动回收&#xff1a; 成员属性基本概念基本语法注意&am…

如何使用Node.js快速创建本地HTTP服务器并实现公网访问服务端

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

leaflet学习笔记-leaflet-ajax获取数据(五)

前言 地图开发中都会用一些GeoJSON数据进行渲染&#xff0c;这是用就会需要加载GeoJSON数据&#xff0c;这时就可以使用leaflet-ajax进行数据的获取 数据准备 本文通过阿里云的地图选择器&#xff08;DataV.GeoAtlas官网&#xff09;可以找到云南省的GeoJSON数据&#xff0c…

深入了解隧道代理HTTP的协议与技术细节

隧道代理HTTP&#xff0c;作为一种网络通信的桥梁技术&#xff0c;其背后的协议与技术细节承载着网络世界的无尽奥秘。对于技术人员而言&#xff0c;深入了解这些细节&#xff0c;不仅有助于优化网络性能&#xff0c;还能为网络安全提供坚实的保障。 一、隧道代理HTTP的协议基…

exec、execFile、fork、spawn的区别与使用场景

在Node.js中&#xff0c;通过子进程可以实现并行执行任务&#xff0c;处理复杂的操作&#xff0c;以及与外部命令或文件进行交互。Node.js提供了多种子进程创建方法&#xff0c;包括exec、execFile、fork和spawn。本文将对这些方法进行比较&#xff0c;并介绍它们的适用场景和示…

This is probably not a problem with npm.

项目场景&#xff1a; 新创建的vue3项目&#xff0c;根据elementplus官网安装步骤进行按需导入安装&#xff0c;运行项目报错 This is probably not a problem with npm.There is likely additional logging output above. 原因分析&#xff1a; 是elementplus安装版本和自动…

【Java进阶篇】String中 intern 的原理是什么?

String中 intern 的原理 ✔️ 典型解析✔️小思考&#xff08;回顾&#xff09; ✔️字面量✔️intern✔️ intern原理✔️a和1有什么不同✔️答案 ✔️ 典型解析 字符串常量池中的常量有两种来源&#xff1a; 1、 字面量会在编译期先进入到Class常量池&#xff0c;然后再在运行…

系统编程--gcc编译

这里写目录标题 gcc编译四步骤简介注意点参数-I-D 二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 gcc编译四步骤 简介 以上是gcc编译的四步骤&#xff0c;每个步骤生成对应…

【java爬虫】使用element-plus进行个股详细数据分页展示

前言 前面的文章我们讲述了获取详细个股数据的方法&#xff0c;并且使用echarts对个股的价格走势图进行了展示&#xff0c;本文将编写一个页面&#xff0c;对个股详细数据进行展示。别问涉及到了element-plus中分页的写法&#xff0c;对于这部分知识将会做重点讲解。 首先看一…

强化学习:PPO

PPO简介 我们在之前的项目中介绍了基于价值的强化学习算法DQN,基于策略的强化学习算法REINFORCE,基于价值和策略的组合算法Actor-Critic. 对于基于策略分方法&#xff1a;参数化智能体的策略&#xff0c;并设计衡量策略好坏的目标函数&#xff0c;通过梯度上升的方法来最大化这…