Fluent UI System Icons 教程

Fluent UI System Icons 教程

fluentui-system-iconsFluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.项目地址:https://gitcode.com/gh_mirrors/fl/fluentui-system-icons

1. 项目介绍

Fluent UI System Icons 是一个由微软开发的开源项目，它提供了大量熟悉、友好且现代化的图标，这些图标来源于Microsoft的设计系统。这个库旨在帮助开发者在自己的应用程序中集成一致且易于辨识的图标，支持多种平台包括Android、iOS、Flutter以及Web等。

2. 项目快速启动

安装依赖

在你的Flutter项目中，你需要在pubspec.yaml文件中添加fluentui_system_icons依赖：

dependencies:
  fluentui_system_icons: ^1.1.251

然后执行以下命令来获取包：

flutter pub get

使用图标

在 Dart 代码中导入库并使用图标：

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      // 使用 FluentIcons 前缀加上图标名称
      icon: Icon(FluentIcons.access_time_24_regular),
      onPressed: () {
        print("Button pressed");
      },
    );
  }
}

构建与运行

确保你的设备已连接或者模拟器开启，然后在终端执行：

flutter run

这将编译并部署应用到你的设备上。

3. 应用案例和最佳实践

最佳实践：

• 在使用图标时，保持一致性，选择与UI风格匹配的图标的样式（如填充、轮廓）。
• 尽可能提供足够的间距，使图标与其他元素之间清晰可辨。
• 根据需要调整图标的大小以适应不同的屏幕尺寸和分辨率。

示例：

创建一个带有多个图标的工具栏：

class MyToolBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        IconButton(
          icon: Icon(FluentIcons.calendar_view_day_24_regular),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(FluentIcons.add_circle_outline_24_regular),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(FluentIcons.search_24_regular),
          onPressed: () {},
        ),
      ],
    );
  }
}

4. 典型生态项目

• Flutter: 该项目本身是作为Flutter插件开发的，可以方便地在Flutter应用中使用。
• Android: 虽然不是原生Android库，但可以通过Java或Kotlin调用Flutter引擎来集成这些图标。
• iOS: 类似地，可以通过Swift或Objective-C集成Flutter插件以使用这些图标。
• Web: 在Web开发中，通过Flutter Web项目可以利用这些图标资源。

本教程提供了关于Fluent UI System Icons的基本操作和应用场景。更多详细信息，如自定义颜色、大小等，可以查阅官方仓库的Readme及示例项目。

fluentui-system-iconsFluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.项目地址:https://gitcode.com/gh_mirrors/fl/fluentui-system-icons