Icon 组件

Smoothness 2022/11/26 Flutter组件

本文介绍Flutter组件之Icon组件，Icon 组件用来显示可缩放的图标，不会像图片一样失真，还能设置颜色。

# Icon

定义

const Icon(
  // IconData 图标数据
  this.icon, {
  Key? key,

  // 尺寸
  this.size,

  // 颜色
  this.color,

  // 方向
  this.textDirection,

  this.semanticLabel,
}) : super(key: key);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

示例

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const ModelBox());
}

class ModelBox extends StatelessWidget {
  const ModelBox({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Box Model'),
        ),
        body: Column(
          children: const [
            Icon(
              Icons.tty_outlined,
              color: Colors.amber,
              size: 24,
              textDirection: TextDirection.rtl,
            ),
          ],
        )),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

开启 pubspec.yaml

flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true

1
2
3
4
5

Google图标库 (opens new window)

# 苹果Icon

苹果风格 icon 需要用 CupertinoIcons 对象来访问；

示例

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const ModelBox());
}

class ModelBox extends StatelessWidget {
  const ModelBox({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Box Model'),
        ),
        body: Column(
          children: const [
            Icon(
              CupertinoIcons.add,
              color: Colors.amber,
              size: 24,
              textDirection: TextDirection.rtl,
            ),
          ],
        )),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

IOS图标库 (opens new window)

18-Image-组件 20-Button-组件