Flutter框架跨平台鸿蒙开发——Icon组件基础

鸣弦artha2026-01-21 9:50

一、Icon组件简介

Icon是Flutter中显示图标的组件，Material Design提供了丰富的图标库。

Icon组件结构

Icon组件
icon属性
size属性
color属性
Icons.xxx
IconData
ImageIcon

二、基础用法

最简单的Icon

dart 复制代码

Icon(Icons.star)

带颜色和大小的Icon

dart 复制代码

Icon(
  Icons.star,
  color: Colors.yellow,
  size: 48,
)

三、Material Icons

常用图标

dart 复制代码

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.settings),
    Icon(Icons.favorite),
    Icon(Icons.share),
  ],
)

图标分类

dart 复制代码

Column(
  children: [
    Text('导航类'),
    Row(children: [Icon(Icons.home), Icon(Icons.menu), Icon(Icons.arrow_back)]),
    Text('社交类'),
    Row(children: [Icon(Icons.favorite), Icon(Icons.share), Icon(Icons.comment)]),
    Text('媒体类'),
    Row(children: [Icon(Icons.play_arrow), Icon(Icons.pause), Icon(Icons.volume_up)]),
  ],
)

四、完整示例

dart 复制代码

class BasicIconExample extends StatelessWidget {
  const BasicIconExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('基础Icon')),
      body: GridView.count(
        crossAxisCount: 4,
        padding: EdgeInsets.all(16),
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        children: [
          _buildIconCard(Icons.home, '首页'),
          _buildIconCard(Icons.search, '搜索'),
          _buildIconCard(Icons.settings, '设置'),
          _buildIconCard(Icons.favorite, '收藏'),
          _buildIconCard(Icons.share, '分享'),
          _buildIconCard(Icons.notification, '通知'),
          _buildIconCard(Icons.camera, '相机'),
          _buildIconCard(Icons.mail, '邮件'),
        ],
      ),
    );
  }

  Widget _buildIconCard(IconData icon, String label) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(icon, size: 32),
        SizedBox(height: 8),
        Text(label, style: TextStyle(fontSize: 12)),
      ],
    );
  }
}

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net