Flutter 中使用 ICON

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

在Flutter中使用 Icon 步骤如下:

导入图标库

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

dart 复制代码
import 'package:flutter/material.dart';

使用图标组件

通过 Icon 来创建图标组件,Icon 组件接受一个 IconData 对象作为参数,用于指定要显示的具体图标。

具体图标可以去 该网站找,然后复制对应的 Icon name 即可。

Icon 参数:如下

dart 复制代码
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:设置图标的语义标签,用于辅助功能。

完整示例:

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

使用示例:

dart 复制代码
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,
          )),
        ],
      ),
      ),
    ],
  ),
相关推荐
蒋星熠8 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
卢叁11 小时前
Flutter之自定义TabIndicator
前端·flutter
萧雾宇12 小时前
Android Compose打造仿现实逼真的烟花特效
android·flutter·kotlin
拜无忧13 小时前
【教程】flutter常用知识点总结-针对小白
android·flutter·android studio
拜无忧14 小时前
【教程】Flutter 高性能项目架构创建指南:从入门到高性能架构
android·flutter·android studio
醉过才知酒浓14 小时前
flutter 拦截返回按钮的方法(WillPopScope or PopScope)
flutter
傅里叶16 小时前
sudo启动Flutter程序AMD初始化失败
linux·flutter
苦逼的搬砖工17 小时前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
黑金IT18 小时前
Dart → `.exe`:Flutter 桌面与纯命令行双轨编译完全指南
flutter
iOS_MingXing18 小时前
flutter TabBar 设置isScrollable 第一个有间距
flutter