Flutter的图标类

Flutter的图标类用于在我们的应用程序中显示特定的图标。我们可以简单地使用 Icon 类在我们的应用程序中插入一个图标，而不是为我们的图标创建一个图像。要使用此类，您必须确保在对象的 pubsec.yml 文件中设置了 uses-material-design: true 。

Syntax:
Icon(
      key key,
      size,
      color,
      semanticLabel,
      textDirection
)

特性：

• color：用于设置图标的颜色
• size：用于调整图标大小
• 语义Lable：在无障碍模式(即画外音)下使用应用程序时会起作用
• textDirection：用于渲染Icon

注意： semanticLabel 在 UI 中不可见。

其中一些如下图所示：

要查看完整的图标列表，请单击此处。

让我们看看其中一些图标在简单的flutter应用程序中的作用。

例子：

在这里，我们将设计一个在不同选项卡上显示各种图标的应用程序。在这里，我们将有 5 个选项卡，每个选项卡带有 5 个图标，我们将更改其属性以查看 UI 更改。属性变化如下：

1. 音乐笔记图标：

   properties:
   color: default, size: 100, semanticLabel: None, textdirection: default

2. 音乐视频图标：

   properties:
   color: default, size: 100, semanticLabel: None, textdirection: default

3. camera_alt 图标：

   properties:
   color: default, size: 100, semanticLabel: 'Camera', textdirection: default

4. 等级图标：

   properties:
   color: red, size: 300, semanticLabel: 'Star', textdirection: default

5. 电子邮件图标：

   properties:
   color: default, size: default, semanticLabel: None', textdirection: default

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(TabBarDemo());
}
  
class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.music_note)),
                Tab(icon: Icon(Icons.music_video)),
                Tab(icon: Icon(Icons.camera_alt)),
                Tab(icon: Icon(Icons.grade)),
                Tab(icon: Icon(Icons.email)),
              ],
            ),
            title: Text('GeeksForGeeks'),
            backgroundColor: Colors.green,
          ),
          body: TabBarView(
            children: [
              Icon(Icons.music_note,
                  size: 100),
              Icon(Icons.music_video,
                color: Colors.blue,
                size: 100),
              Icon(Icons.camera_alt,
                semanticLabel: 'Camera',
                size: 100),
              Icon(Icons.grade,
                color: Colors.red,
                size: 300,
                semanticLabel: 'Star',),
              Icon(Icons.email),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！