FlutterIcon图标组件

Posted 2021-04-29 码上加油站

说明

图标组件（ Icon ）为展示图标的组件，该组件不可交互。

如果想要交互，可以使用IconButton。

另外Icon是具有方向性（Directionality）的，但通常情况下不会在Icon中设置textDirection，而是使用顶级控件中的设置。

使用图标需要在pubspec.yaml中进行设置：

flutter:
  uses-material-design: true

Flutter项目的时候默认配置了此项，所以正常情况下不需要关注。

基本用法：

Icon(Icons.add)

建议多使用图标，优点：体会小，图标都是矢量图，不存在失真的问题。

设置其大小和颜色：

Icon(
  Icons.add,
  size: 28,
  color: Colors.red,
)

常见属性

属性名	描述
icon	显示的图标
size	大小
color	颜色
semanticLabel	语义标签，此标签不会显示在UI中
textDirection	用户呈现图标的文本方向

示例

import 'package:flutter/material.dart';

class IconDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return IconDemoPageState();
  }
}

class IconDemoPageState extends State<IconDemoPage> {
  @override
  Widget build(BuildContext context) {
    /// 页面的架构
    return Scaffold(
      ///定义页面的标题
      appBar: AppBar(
        title: Text("图标"),
      ),

      ///定义的页面的主体内容
      body: Icon(
        Icons.build,
        color: Colors.red,
        semanticLabel: "user",
        size: 64.0,
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

效果：

完

  码上加油站

  一起来加油

长按扫码关注

点“在看”你懂得