第二章●第五节：图标（Icon）

使用字形绘制图形图标小组件，这个字形是IconData中描述的字体。Icons不是交互式的，若要使用交互式图标，参考Material IconButton。

使用Icon时必须有Directionality组件，通常，由WidgetApp或MaterialApp自动引入。

• IconData：字体标志符号表示的图标。
• IconButton：Material Design图标按钮，用于交互。其通常在AppBar.actions中设置，但也可以在其他地方使用。若onPressed回调为null，则该按钮将被禁用，并不会对触摸作出反应。
• Icons：图标列表。
• Directionality：一个用于确定文本的方向和文本方向灵敏度的渲染对象的组件。
• MaterialApp：使用Material Design的应用程序。其包含Material Design应用程序通常需要的组件。
• WidgetsApp：包含应用程序通常需要的组件，其主要提供的功能是绑定系统后退按钮以弹出导航器或退出应用程序。
• IconTheme：图标主题。
• ImageIcon：用于显示AssetImages或ImageProviders中的图标。

示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Icon组件"),
          iconTheme: IconThemeData(//图标主题
            color: Colors.white
          ),
          actions: <Widget>[//图标组
            Icon(Icons.account_balance),
            Icon(Icons.accessibility_new)
          ],
        ),
        body: Column(
          children: <Widget>[
            IconButton(icon: Icon(Icons.image), onPressed: () {//交互式图标
              print("点击了按钮");
            }),
            BackButton(//返回按钮
              color: Colors.blue,
            )
          ],
        ),
      ),
    );
  }
}

效果

Icon组件示例

Icon属性

Icon属性

本节内容到此结束，若在使用过程中遇到问题，欢迎留言交流，我们一起成长。

总目录结构