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

      ),



    );
  }


  }
相关推荐
LawrenceLan2 小时前
Flutter 零基础入门(十):final、const 与不可变数据
开发语言·flutter·dart
行者963 小时前
Flutter跨平台开发:安全检测组件适配OpenHarmony
flutter·harmonyos·鸿蒙
小雨下雨的雨4 小时前
Flutter 框架跨平台鸿蒙开发 —— GridView 控件之多维网格美学
flutter·华为·交互·harmonyos·鸿蒙系统
cn_mengbei4 小时前
Flutter for OpenHarmony 实战:ElevatedButton 悬浮按钮详解
flutter
不爱吃糖的程序媛4 小时前
OpenHarmony跨端生态适配全指南|Flutter/RN/三方库/C/C++/仓颉 鸿蒙化最佳实践
c语言·c++·flutter
小雨下雨的雨4 小时前
Flutter跨平台开发实战: 鸿蒙与循环交互艺术:无限循环的 Banner 引擎
flutter·ui·华为·交互·harmonyos·鸿蒙系统
奋斗的小青年!!5 小时前
Flutter与鸿蒙深度融合:打造物理引擎驱动的3D卡片交互体验
flutter·3d·harmonyos·鸿蒙
恋猫de小郭5 小时前
Google DeepMind :RAG 已死,无限上下文是伪命题?RLM 如何用“代码思维”终结 AI 的记忆焦虑
前端·flutter·ai编程