📜  Flutter的图标类

📅  最后修改于: 2021-09-02 05:33:18             🧑  作者: Mango

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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!