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,
          )),
        ],
      ),
      ),
    ],
  ),

相关推荐

  1. 微信小程序使用自定义 icon 图标

    2024-01-06 20:46:04       36 阅读
  2. vue3 + vite 使用 svg-icon 的图标

    2024-01-06 20:46:04       8 阅读
  3. Flutter使用PhotoViewGallery指南

    2024-01-06 20:46:04       40 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-06 20:46:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-06 20:46:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-06 20:46:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-06 20:46:04       20 阅读

热门阅读

  1. journalctl -u kubelet 查看指定时间段日志

    2024-01-06 20:46:04       37 阅读
  2. MATLAB --- interp1( )函数的用法

    2024-01-06 20:46:04       36 阅读
  3. AI:103-基于深度学习的海上牧场鱼群识别技术

    2024-01-06 20:46:04       46 阅读
  4. linux 安装minio

    2024-01-06 20:46:04       45 阅读
  5. RabbitMQ 教程

    2024-01-06 20:46:04       45 阅读
  6. 动态选择pc移动端css文件

    2024-01-06 20:46:04       35 阅读
  7. 雅思词汇——Word List 2(V2)

    2024-01-06 20:46:04       29 阅读
  8. ES在工作中的使用

    2024-01-06 20:46:04       42 阅读
  9. python基础教程三(元组和字符串格式化)

    2024-01-06 20:46:04       39 阅读
  10. 机器学习中聚类算法-简单介绍

    2024-01-06 20:46:04       37 阅读
  11. git上传分支后在其他电脑看不到

    2024-01-06 20:46:04       38 阅读
  12. linux搭建git仓库

    2024-01-06 20:46:04       39 阅读