Flutter---常见的ICON图标

效果图

代码实例

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<IconData> IconsList = [
    //操作类
    Icons.add ,                 // ➕ 添加
    Icons.remove ,              // ➖ 移除
    Icons.close  ,              // ❌ 关闭
    Icons.check  ,              // ✓ 完成/选中
    Icons.clear  ,              // 🗑️ 清除
    Icons.delete  ,             // 🗑️ 删除
    Icons.edit    ,             // ✏️ 编辑
    Icons.save    ,             // 💾 保存
    Icons.done    ,             // ✅ 完成
    Icons.cancel   ,            // ❌ 取消
    Icons.refresh   ,           // 🔄 刷新
    Icons.search    ,           // 🔍 搜索
    Icons.menu      ,           // ☰ 菜单
    Icons.more_vert   ,         // ⋮ 更多(垂直)
    Icons.more_horiz   ,        // ⋯ 更多(水平)
    Icons.share      ,          // ↗️ 分享
    Icons.download   ,          // ⬇️ 下载
    Icons.upload    ,           // ⬆️ 上传

    //导航类
    Icons.arrow_back,           // ⬅️ 返回
    Icons.arrow_forward   ,     // ➡️ 前进
    Icons.arrow_upward    ,     // ⬆️ 向上
    Icons.arrow_downward ,      // ⬇️ 向下
    Icons.home           ,      // 🏠 首页
    Icons.navigate_before ,     // ◀️ 上一个
    Icons.navigate_next    ,    // ▶️ 下一个
    Icons.expand_more     ,     // 🔽 展开更多
    Icons.expand_less     ,     // 🔼 收起
    Icons.chevron_left    ,     // ◀️ 左箭头
    Icons.chevron_right   ,     // ▶️ 右箭头

    //通讯类
    Icons.phone,                // 📞 电话
    Icons.email  ,              // 📧 邮件
    Icons.message   ,           // 💬 消息
    Icons.chat    ,             // 💭 聊天
    Icons.call    ,             // 📞 通话
    Icons.videocam  ,           // 📹 视频
    Icons.mic      ,            // 🎤 麦克风
    Icons.mic_off    ,          // 🚫🎤 麦克风关闭
    Icons.notifications  ,      // 🔔 通知
    Icons.notifications_off  ,  // 🔕 通知关闭

    //用户相关图标
    Icons.person    ,           // 👤 个人
    Icons.person_add,          //👤➕ 添加用户
    Icons.account_circle ,    // ⭕ 账户
    Icons.face            ,     // 😊 人脸
    Icons.supervised_user_circle, // 👥 用户组
    Icons.logout  ,             // 🚪 退出
    Icons.login  ,              // 🔑 登录
    Icons.settings ,            // ⚙️ 设置
    Icons.help     ,            //❓ 帮助
    Icons.info    ,             //ℹ️ 信息

    //文件文档类
    Icons.description          ,//📄 文档
    Icons.insert_drive_file   ,// 💾 文件
    Icons.folder              ,// 📁 文件夹
    Icons.folder_open         ,// 📂 打开文件夹
    Icons.attachment          ,// 📎 附件
    Icons.cloud               ,// ☁️ 云
    Icons.cloud_upload        ,// ☁️⬆️ 云上传
    Icons.cloud_download      ,// ☁️⬇️ 云下载
    Icons.print               ,// 🖨️ 打印
    Icons.picture_as_pdf      ,// 📊 PDF

    //媒体控制相关类
    Icons.play_arrow           ,//▶️ 播放
    Icons.pause                ,//⏸️ 暂停
    Icons.stop                ,// ⏹️ 停止
    Icons.skip_next           ,// ⏭️ 下一首
    Icons.skip_previous       ,// ⏮️ 上一首
    Icons.replay               ,//🔄 重播
    Icons.volume_up            ,//🔊 音量加
    Icons.volume_down          ,//🔉 音量减
    Icons.volume_off          ,// 🔇 静音
    Icons.headset              ,//🎧 耳机

    //功能设备类
    Icons.bluetooth            ,//📶 蓝牙
    Icons.wifi                 ,//📡 WiFi
    Icons.signal_cellular_4_bar ,//📶 信号满格
    Icons.battery_full         ,//🔋 满电
    Icons.gps_fixed            ,//📍 GPS
    Icons.nfc                  ,//🔘 NFC
    Icons.usb                  ,//🔌 USB
    Icons.camera               ,//📷 相机
    Icons.camera_alt           ,//📸 相机替代

    //社交应用类
    Icons.thumb_up             ,//👍 赞
    Icons.thumb_down           ,//👎 踩
    Icons.favorite             ,//❤️ 收藏
    Icons.favorite_border     ,// 🤍 未收藏
    Icons.star                ,// ⭐ 星级
    Icons.star_border          ,//☆ 未评分
    Icons.share                ,//↗️ 分享
    Icons.comment             ,// 💬 评论
    Icons.tag                 ,// 🏷️ 标签
    Icons.link                ,// 🔗 链接、

    //商业购物类
    Icons.shopping_cart        ,//🛒 购物车
    Icons.payment              ,//💳 支付
    Icons.credit_card          ,//💳 信用卡
    Icons.receipt              ,//🧾 收据
    Icons.local_offer          ,//🏷️ 优惠券
    Icons.attach_money        ,// 💰 货币
    Icons.monetization_on     ,// 💵 钱币
    Icons.business            ,// 🏢 商业
    Icons.store               ,// 🏪 商店
    Icons.shopping_bag        ,// 👜 购物袋

    //IOS风格
    CupertinoIcons.arrow_left       , // iOS左箭头
    CupertinoIcons.arrow_right       ,  // iOS右箭头
    CupertinoIcons.chevron_up       ,   // iOS上箭头
    CupertinoIcons.chevron_down    ,    // iOS下箭头
    CupertinoIcons.home            ,    // iOS首页
    CupertinoIcons.settings        ,    // iOS设置
    CupertinoIcons.search          ,    // iOS搜索
    CupertinoIcons.profile_circled ,    // iOS圆形个人资料
    CupertinoIcons.bell            ,    // iOS铃铛
    CupertinoIcons.chat_bubble     ,    // iOS聊天气泡
    CupertinoIcons.camera          ,    // iOS相机
    CupertinoIcons.photo           ,    // iOS照片
    CupertinoIcons.mail            ,    // iOS邮件
    CupertinoIcons.phone           ,    // iOS电话
    CupertinoIcons.heart           ,    // iOS心形
    CupertinoIcons.heart_fill      ,    // iOS实心心形
    CupertinoIcons.star            ,    // iOS星星
    CupertinoIcons.star_fill       ,    // iOS实心星星

 //放大镜
    Icons.search        ,     
  ];
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body:GridView.count(
        crossAxisCount: 6,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 1,
        children: List.generate(IconsList.length, (index){
          return Container(
            decoration: BoxDecoration(
              color: Colors.lightBlueAccent,
            ),
            child: Center(
              child: Icon(IconsList[index],color: Colors.white,),
            ),
          );
        }),

      ),



    );
  }


  }
相关推荐
灰灰勇闯IT5 小时前
Flutter for OpenHarmony:自定义 Paint 绘图 —— 释放 Canvas 的创造力
flutter
2601_949833395 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
牛马1117 小时前
Flutter OverlayEntry
flutter
2603_949462108 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
2601_949975799 小时前
Flutter for OpenHarmony艺考真题题库+帮助中心实现
flutter
子春一12 小时前
Flutter for OpenHarmony:构建一个 Flutter 井字棋游戏,深入解析状态驱动逻辑、胜利判定与极简交互设计
flutter·游戏·交互
雨季66612 小时前
Flutter 三端应用实战:OpenHarmony “极简手势轨迹球”——指尖与屏幕的诗意对话
开发语言·javascript·flutter
ujainu12 小时前
Flutter + OpenHarmony 游戏开发进阶:CustomPainter 手绘游戏世界——从球体到轨道
flutter·游戏·信息可视化·openharmony
雨季66613 小时前
Flutter 三端应用实战:OpenHarmony “专注时光盒”——在碎片洪流中守护心流的数字容器
开发语言·前端·安全·flutter·交互
kirk_wang13 小时前
Flutter艺术探索-Flutter相机与相册:camera库与image_picker集成
flutter·移动开发·flutter教程·移动开发教程