Flutter图标库插件geira_icons的使用

Flutter图标库插件geira_icons的使用

介绍

Geira Icons 是一个为Flutter应用提供的图标包。通过这个插件，你可以轻松地在你的Flutter项目中使用大量的高质量图标。

安装

要在你的Flutter项目中使用 geira_icons 插件，你需要在 pubspec.yaml 文件的 dependencies 部分添加以下行：

dependencies:
  geira_icons: ^2.1.9

然后，在终端中运行以下命令来安装依赖：

flutter pub get

使用示例

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 geira_icons 插件。这个示例创建了一个简单的应用，用户可以通过搜索栏查找并查看不同的图标。

import 'package:flutter/material.dart';
import 'package:geira_icons/geira_icons.dart';
import 'package:geira_icons/icons_map.dart';

void main() {
  runApp(GeiraIconsApp());
}

class GeiraIconsApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏调试模式横幅
      title: 'Geira Icons', // 应用标题
      theme: ThemeData(
        iconTheme: const IconThemeData(size: 36.0, color: Colors.black87), // 设置图标主题
        primarySwatch: Colors.blue, // 设置主色调
        textTheme: const TextTheme(
          bodyMedium: TextStyle(fontSize: 16.0, color: Colors.black87), // 设置文本样式
        ),
      ),
      home: const GeiraIconsHome(), // 设置首页
    );
  }
}

class GeiraIconsHome extends StatefulWidget {
  const GeiraIconsHome({super.key});

  [@override](/user/override)
  State<GeiraIconsHome> createState() => GeiraIconsHomeState();
}

class GeiraIconsHomeState extends State<GeiraIconsHome> {
  var _searchTerm = ""; // 搜索关键词
  var _isSearching = false; // 是否正在搜索

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 过滤图标列表
    final filteredIcons = icons
        .where((icon) =>
            _searchTerm.isEmpty ||
            icon.title.toLowerCase().contains(_searchTerm.toLowerCase()))
        .toList();

    // 获取当前设备的方向
    final orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: _isSearching ? _searchBar(context) : _titleBar(), // 根据是否搜索显示不同的AppBar
      body: GridView.builder(
        itemCount: filteredIcons.length, // 图标数量
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: orientation == Orientation.portrait ? 2 : 3, // 设置网格布局
        ),
        itemBuilder: (context, index) {
          final icon = filteredIcons[index];

          return InkWell(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute<Null>(
                  builder: (BuildContext context) {
                    return GestureDetector(
                      onTap: () {
                        Navigator.of(context).pop(); // 点击背景关闭详情页
                      },
                      child: Container(
                        color: Colors.white,
                        child: SizedBox.expand(
                          child: Hero(
                            tag: icon, // 使用Hero动画
                            child: Icon(
                              icon.iconData,
                              size: 100.0, // 图标大小
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              );
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
              children: <Widget>[
                Hero(tag: icon, child: Icon(icon.iconData)), // 显示图标
                Container(
                  padding: EdgeInsets.only(top: 16.0), // 添加顶部间距
                  child: Text(icon.title), // 显示图标名称
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  AppBar _titleBar() {
    return AppBar(
      title: const Text("Geira Icons"), // AppBar标题
      actions: [
        IconButton(
          icon: const Icon(GIcons.search), // 搜索按钮
          onPressed: () {
            ModalRoute.of(context)?.addLocalHistoryEntry(
              LocalHistoryEntry(
                onRemove: () {
                  setState(() {
                    _searchTerm = ""; // 清空搜索关键词
                    _isSearching = false; // 停止搜索
                  });
                },
              ),
            );

            setState(() {
              _isSearching = true; // 开始搜索
            });
          },
        )
      ],
    );
  }

  AppBar _searchBar(BuildContext context) {
    return AppBar(
      leading: IconButton(
        icon: const Icon(GIcons.search), // 返回按钮
        onPressed: () {
          setState(() {
            Navigator.pop(context); // 关闭搜索栏
            _isSearching = false;
            _searchTerm = ""; // 清空搜索关键词
          });
        },
      ),
      title: TextField(
        onChanged: (text) => setState(() => _searchTerm = text), // 监听输入变化
        autofocus: true, // 自动聚焦
        style: const TextStyle(fontSize: 18.0), // 设置输入框字体大小
        decoration: const InputDecoration(
          hintText: "Search icons...", // 提示文字
        ),
      ),
    );
  }
}

class IconDefinition implements Comparable {
  final IconData iconData; // 图标数据
  final String title; // 图标名称

  IconDefinition(String key)
      : iconData = iconLib[key] ?? GIcons.error, // 获取图标数据，默认为错误图标
        title = key;

  [@override](/user/override)
  String toString() => 'IconDefinition{iconData: $iconData, title: $title}';

  [@override](/user/override)
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is IconDefinition &&
          runtimeType == other.runtimeType &&
          iconData == other.iconData &&
          title == other.title;

  [@override](/user/override)
  int get hashCode => iconData.hashCode ^ title.hashCode;

  [@override](/user/override)
  int compareTo(other) => title.compareTo(other.title);
}

// 假设以下部分是必要的修正
GIcons iconLib = GIcons();
var icons = iconMap.keys
    .map((key) => IconDefinition(key))
    .toList(); // 转换为列表以避免问题