Flutter图标库插件ionicons的使用

Ionicons

这个包包含了来自Ionicons v6.0.2的1332个图标。命名约定与CSS名称相同，所有连字符都替换为下划线。

使用方法

Ionicons提供了三种风格的图标：outline（轮廓）、filled（实心）和sharp（尖锐）。使用时需要先导入ionicons包：

import 'package:ionicons/ionicons.dart';

然后可以在代码中直接使用这些图标：

Icon(Ionicons.add) // 默认样式
Icon(Ionicons.add_outline) // 轮廓样式
Icon(Ionicons.add_sharp) // 尖锐样式

示例

你可以通过访问在线示例来查看Ionicons的实际效果。

完整示例代码

下面是一个完整的Flutter应用示例，展示了如何在应用中使用Ionicons图标库，并实现了一个简单的图标搜索功能：

import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
import 'package:url_launcher/url_launcher_string.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Ionicons',
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

/// Example page
class MyHomePage extends StatelessWidget {
  final _outlineItems = ValueNotifier<List<MapEntry<String, String>>>([]);
  final _filledItems = ValueNotifier<List<MapEntry<String, String>>>([]);
  final _sharpItems = ValueNotifier<List<MapEntry<String, String>>>([]);

  MyHomePage({Key? key}) : super(key: key) {
    _onTextChanged(''); // 触发搜索
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Ionicons'),
          bottom: const TabBar(tabs: [
            Tab(text: 'Outline'),
            Tab(text: 'Filled'),
            Tab(text: 'Sharp'),
          ]),
          actions: [
            IconButton(
              onPressed: _onPressedGitHub,
              icon: const Icon(Ionicons.logo_github),
            ),
            TextButton(
              onPressed: _onPressedPub,
              child: const Text(
                'v0.2.1',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16),
              child: TextField(
                autofocus: true,
                decoration: const InputDecoration(
                  hintText: 'Search icons',
                  prefixIcon: Padding(
                    padding: EdgeInsets.only(left: 32, right: 16),
                    child: Icon(Ionicons.search_outline),
                  ),
                ),
                onChanged: _onTextChanged,
              ),
            ),
            Expanded(
              child: TabBarView(
                children: [
                  ValueListenableBuilder<dynamic>(
                    valueListenable: _outlineItems,
                    builder: (context, value, child) => _ItemList(items: value),
                  ),
                  ValueListenableBuilder<dynamic>(
                    valueListenable: _filledItems,
                    builder: (context, value, child) => _ItemList(items: value),
                  ),
                  ValueListenableBuilder<dynamic>(
                    valueListenable: _sharpItems,
                    builder: (context, value, child) => _ItemList(items: value),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 处理图标搜索
  void _onTextChanged(String value) {
    final items = value.isEmpty
        ? ioniconsMapping.entries.toList()
        : ioniconsMapping.entries
            .where((e) => e.key.contains(value.toLowerCase()))
            .toList();

    _outlineItems.value =
        items.where((e) => e.key.endsWith('-outline')).toList();
    _filledItems.value = items
        .where((e) => !(e.key.endsWith('-outline') || e.key.endsWith('-sharp')))
        .toList();
    _sharpItems.value = items.where((e) => e.key.endsWith('-sharp')).toList();
  }

  /// 处理点击GitHub按钮
  void _onPressedGitHub() {
    launchUrlString('https://github.com/ez-connect/flutter-ionicons');
  }

  /// 处理点击Pub按钮
  void _onPressedPub() {
    launchUrlString('https://pub.dev/packages/ionicons');
  }
}

/// 渲染图标列表
class _ItemList extends StatelessWidget {
  final List<MapEntry<String, String>> items;

  final _controller = ScrollController();

  _ItemList({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      controller: _controller,
      maxCrossAxisExtent: 86,
      childAspectRatio: 0.7,
      children: List.generate(items.length, (index) {
        final item = items[index];
        return Column(
          children: [
            Icon(IoniconsData(int.parse(item.value)), size: 64),
            const SizedBox(height: 8),
            Text(
              item.key,
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 12),
            ),
          ],
        );
      }),
    );
  }
}

此示例代码创建了一个带有标签页的应用程序，用户可以在其中搜索并浏览不同风格的Ionicons图标。每个标签页显示一种风格的图标（Outline、Filled 和 Sharp），并且可以通过搜索框进行过滤。此外，还提供了跳转到GitHub和Pub页面的功能按钮。