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,),
            ),
          );
        }),

      ),



    );
  }


  }
相关推荐
一只大侠的侠11 分钟前
Flutter开源鸿蒙跨平台训练营 Day 3
flutter·开源·harmonyos
一只大侠的侠1 小时前
【Harmonyos】Flutter开源鸿蒙跨平台训练营 Day 2 鸿蒙跨平台开发环境搭建与工程实践
flutter·开源·harmonyos
微祎_2 小时前
Flutter for OpenHarmony:构建一个 Flutter 平衡球游戏,深入解析动画控制器、实时物理模拟与手势驱动交互
flutter·游戏·交互
ZH15455891313 小时前
Flutter for OpenHarmony Python学习助手实战:面向对象编程实战的实现
python·学习·flutter
renke33644 小时前
Flutter for OpenHarmony:构建一个 Flutter 色彩调和师游戏,RGB 空间探索、感知色差计算与视觉认知训练的工程实现
flutter·游戏
王码码20354 小时前
Flutter for OpenHarmony 实战之基础组件:第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos
ujainu6 小时前
Flutter + OpenHarmony 实现经典打砖块游戏开发实战—— 物理反弹、碰撞检测与关卡系统
flutter·游戏·openharmony·arkanoid·breakout
微祎_6 小时前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
王码码20356 小时前
Flutter for OpenHarmony 实战之基础组件:第二十七篇 BottomSheet — 动态底部弹窗与底部栏菜单
android·flutter·harmonyos
ZH15455891317 小时前
Flutter for OpenHarmony Python学习助手实战:Web开发框架应用的实现
python·学习·flutter