Flutter图标库插件 moon_icons 的使用

简介

Moon Design System Icons 是一个包含现代且精心设计的图标的集合。你可以通过 moon_icons 插件在你的 Flutter 项目中使用这些图标。

使用方法

首先，在 pubspec.yaml 文件中添加 moon_icons 依赖：

dependencies:
  moon_icons: ^最新版本号

然后运行 flutter pub get 来安装该插件。

接下来，你可以在你的 Dart 文件中导入并使用这些图标：

import 'package:moon_icons/moon_icons.dart';

class ExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(MoonIcons.arrows_boost_24_regular),
      onPressed: () { 
        print("Button tapped"); 
      },
    );
  }
}

示例 Demo

以下是一个完整的示例应用，展示了如何展示所有的 MoonIcons 图标。这个例子将图标分组，并以滚动列表的形式显示出来。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:moon_icons/moon_icons.dart'; // 导入 moon_icons 包

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Moon Icons Demo",
      theme: ThemeData(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  List<List<String>> _groupInTrios(List<String> keys) {
    List<List<String>> trios = [];
    for (int i = 0; i < keys.length; i += 3) {
      trios.add(keys.sublist(i, min(i + 3, keys.length)));
    }
    return trios;
  }

  @override
  Widget build(BuildContext context) {
    // 假设 iconsMap 已经定义并且包含了所有可用的 MoonIcons
    Map<String, IconData> iconsMap = MoonIcons.icons;

    Map<String, Map<String, IconData>> segments = {};
    Map<String, Map<String, IconData>> lightSegments = {};
    Map<String, Map<String, IconData>> regularSegments = {};

    for (String key in iconsMap.keys) {
      List<String> parts = key.split('_');
      String segment = parts.first;
      String type = parts.last;

      if (type == "light") {
        if (!lightSegments.containsKey(segment)) {
          lightSegments[segment] = {};
        }
        lightSegments[segment]![key] = iconsMap[key]!;
      } else if (type == "regular") {
        if (!regularSegments.containsKey(segment)) {
          regularSegments[segment] = {};
        }
        regularSegments[segment]![key] = iconsMap[key]!;
      }
    }

    Map<String, Map<String, IconData>> combinedSegments = {};
    Set<String> allSegments = lightSegments.keys.toSet()..addAll(regularSegments.keys);

    for (String segment in allSegments) {
      combinedSegments[segment] = {};
      List<String> lightKeys = lightSegments[segment]?.keys.toList() ?? [];
      List<String> regularKeys = regularSegments[segment]?.keys.toList() ?? [];

      List<List<String>> lightTrios = _groupInTrios(lightKeys);
      List<List<String>> regularTrios = _groupInTrios(regularKeys);
      int maxTrios = max(lightTrios.length, regularTrios.length);

      for (int i = 0; i < maxTrios; i++) {
        if (i < lightTrios.length) {
          for (String key in lightTrios[i]) {
            combinedSegments[segment]![key] = lightSegments[segment]![key]!;
          }
        }
        if (i < regularTrios.length) {
          for (String key in regularTrios[i]) {
            combinedSegments[segment]![key] = regularSegments[segment]![key]!;
          }
        }
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("Moon Icons Demo"),
      ),
      body: CustomScrollView(
        slivers: combinedSegments.values.map((e) => Segment(segmentMap: e)).toList(),
      ),
    );
  }
}

// 假设 Segment widget 已经定义好用于展示图标

请注意，上述代码中的 Segment widget 需要你自己实现或替换为适合你项目的 UI 组件。

常见问题解答

图标名称中的数字代表什么？

图标名称中的数字表示该图标在哪个尺寸下看起来最好。例如，arrows_boost_24_regular 中的 24 表示该图标最适合在 24x24 像素的大小下显示。