Flutter基础组件(5):Icon(图标)

 


Flutter 提供了多种方式来展示图标,其中Icon是最常用的小部件之一。它不仅用于展示简单的图标,还可以与文本、按钮和其他小部件组合使用,以增强用户界面的交互性。

Icon 是 Flutter 中用于展示图标的小部件。它通常与图标数据(如[字体图标)一起使用,可以很容易地集成到各种用户界面元素中。Flutter 自带了一套 Material Icons 和 Cupertino Icons,分别对应于 Material 和 iOS 设计语言。

一、Icon 的属性

Icon小部件有几个重要的属性:

  • icon: 用于指定要显示的图标。可以是ImageIconSvgPicture.asset或者任何实现了IconData接口的图标数据。
  • size: 用于设置图标的大小。
  • color: 用于设置图标的颜色。
  • textDirection: 用于设置图标的文本方向,可以是TextDirection.ltrTextDirection.rtl

二、基本使用

使用Icon小部件非常简单:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});    
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyHomePage(),
      )
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});     
  @override
  Widget build(BuildContext context) {
    return const Center(        // 使用Icon小部件
      child: Icon(
        Icons.star_border, // Material Icons
        size: 128.0, // 设置图标大小
        color: Colors.black, // 设置图标颜色
      ),
    );
  }
}

效果图如下所示:

Flutter_icon_G.png


三、自定义 Icon

除了使用 Flutter 自带的图标,你还可以自定义图标:

(1)使用图片作为图标

通过ImageIcon使用图片文件作为图标。

ImageIcon(
  Image.asset('path/to/your/icon.png'),
  size: 24.0,
)

(2)使用自定义字体图标

通过指定字体文件和图标对应的unicode字符来使用自定义字体图标。

import 'package:flutter/services.dart';

Icon(
  IconData(0x1234, fontFamily: 'MyCustomFont'), // 假设0x1234是图标的unicode
  size: 24.0,
)

确保在pubspec.yaml文件中指定了字体文件:

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: fonts/MyCustomFont.ttf

(3)使用第三方图标库

Flutter 社区提供了许多第三方图标库,如font_awesome_flutter,你可以很容易地将它们集成到你的应用中。

ImageIcon(
  Image.asset('path/to/your/icon.png'),
  size: 24.0,
)

四、Icon 的高级用法

(1)与文字组合

Icon可以与Text小部件组合使用,创建带有图标的文本。

Row(
  children: <Widget>[
    Icon(Icons.mail),
    Text('Inbox'),
  ],
)

(2)在按钮中使用

Icon经常用于按钮,以提供直观的视觉反馈。

RaisedButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

(3)响应用户交互

Icon支持用户交互,如点击和悬停。

GestureDetector(
  onTap: () {
    // 处理点击事件
  },
  child: Icon(Icons.star),
)

posted @   fengMisaka  阅读(758)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 【.NET】调用本地 Deepseek 模型
点击右上角即可分享
微信分享提示