Flutter初学之路—`Icon` （图标组件）

2023年1月24日 377次阅读 来源: ohayoi

Icon（图标组件）为展示图标的组件。其提供了一种构造器。

  const Icon(IconData icon, {//显示的图标
    Key key,
    double size,//图标尺寸
    Color color,    //图标颜色
    String semanticLabel,//语义标签
    TextDirection textDirection,//用户呈现图标的文本方向
  })
图标是不能做交互的，若需要交互式图标，请使用material的IconButton。

当使用图标时，必须有一个具有方向性的组件。通常是由WidgetsApp或MaterialApp自动引入的。

另外
  • IconButton：交互式图标；
  • Icons：图标列表，图标库中的图标；
  • ImageIcon：用于显示来自AssetImage或其他ImageProviders的图标。

继承：

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Icon

属性：

名称类型说明
colorColor图标颜色
iconIconData显示的图标
semanticLabelString语义标签，此标签不会显示在UI中
sizedouble图标尺寸
textDirectionTextDirection用户呈现图标的文本方向

示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    const data = "Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep";
    return MaterialApp(
      title: 'Hello World!',
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Fultter'),
        ),
        body: Center(
          child: Icon(
            Icons.build,
            color: Colors.red,
            semanticLabel: "user",
            size: 64.0,
            textDirection: TextDirection.rtl,
          ),
        ),
      ),
    );
  }
}

参考文档：Icon class

    原文作者：ohayoi
    原文地址: https://www.jianshu.com/p/421a919efb40
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞