Flutter图标库插件fluentui_system_icons的使用

Fluent UI System Icons简介

Fluent UI System Icons是来自Microsoft的一系列熟悉的、友好的和现代的图标集合。

👍 喜欢我们的话，请在pub.dev上给我们点赞！

使用方法

要在Flutter项目中使用fluentui_system_icons，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  fluentui_system_icons: ^latest_version # 请用最新版本号替换latest_version

然后，在你的Dart代码中导入这个包并使用它提供的图标。下面是一个简单的例子，展示了如何在IconButton中使用Fluent图标：

import 'package:flutter/material.dart';
import 'package:fluentui_system_icons/fluentui_system_icons.dart';

class MyFlutterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fluent Icon Example'),
      ),
      body: Center(
        child: IconButton(
          icon: Icon(FluentIcons.access_time_24_regular), // 使用FluentIcons + 图标名称
          onPressed: () { 
            print("Button pressed");
          },
        ),
      ),
    );
  }
}

示例Demo

为了更全面地展示fluentui_system_icons的功能，这里提供一个完整的示例应用，该应用允许用户浏览所有可用的Fluent图标，并支持搜索和切换显示模式（列表或网格）：

import 'package:flutter/material.dart';
import 'package:fluentui_system_icons/fluentui_system_icons.dart';

// 假设icons是一个包含所有图标的列表，每个元素都是一个Map<String, dynamic>
// 这里简化为直接定义几个图标用于演示
final List<Map<String, dynamic>> icons = [
  {'iconName': 'access_time', 'iconData': FluentIcons.access_time_24_regular, 'defaultSize': 24.0},
  // 更多图标...
];

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

class FluentUIIconKit extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Fluent icons',
      home: FluentUIShowcaseWidget(),
    );
  }
}

class FluentUIShowcaseWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FluentUIShowcaseWidgetState();
}

class FluentUIShowcaseWidgetState extends State<FluentUIShowcaseWidget> {
  var _searchTerm = "";
  var isListMode = true;
  TextEditingController dismissText = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final filteredIcons = icons
        .where((icon) =>
            _searchTerm.isEmpty ||
            icon['iconName'].toString().toLowerCase().contains(_searchTerm.toLowerCase()))
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text('Fluent Icons Showcase'),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            _searchBar(context),
            Expanded(
              child: GridView.builder(
                itemCount: filteredIcons.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: isListMode ? 1 : 4,
                    childAspectRatio: isListMode
                        ? (MediaQuery.of(context).size.height * 0.010)
                        : 1),
                itemBuilder: (context, index) {
                  final icon = filteredIcons[index];
                  return Padding(
                    padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
                    child: Row(
                      children: <Widget>[
                        SizedBox(
                          child: Icon(icon['iconData'], size: icon['defaultSize']),
                          width: 30,
                        ),
                        SizedBox(
                          width: 40,
                        ),
                        if (isListMode) Text(icon['iconName']),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Material _searchBar(BuildContext context) {
    return Material(
      elevation: 10.0,
      child: Row(
        children: <Widget>[
          IconButton(
            icon: Icon(
              FluentIcons.search_24_regular,
              color: Colors.grey,
            ),
            onPressed: () {
              setState(() {
                _searchTerm = "";
              });
            },
          ),
          Expanded(
            child: TextField(
              controller: dismissText,
              onChanged: (text) => setState(() => _searchTerm = text),
              style: TextStyle(fontSize: 18.0, color: Colors.black),
              decoration: InputDecoration(
                  border: InputBorder.none, hintText: 'Search icons'),
            ),
          ),
          IconButton(
            icon: Icon(
              FluentIcons.dismiss_24_filled,
              color: Colors.grey,
            ),
            onPressed: () {
              setState(() {
                _searchTerm = "";
                dismissText.text = "";
              });
            },
          ),
          IconButton(
            icon: Icon(
              isListMode
                  ? FluentIcons.grid_24_regular
                  : FluentIcons.list_24_regular,
              color: Colors.grey,
            ),
            onPressed: () {
              setState(() {
                isListMode = !isListMode;
              });
            },
          ),
        ],
      ),
    );
  }
}

请注意，上述代码中的icons列表应根据实际需求填充所有Fluent图标的数据。此外，您可以通过访问GitHub上的example目录，查看所有可用的FluentUISystemIcons。

常见问题解答（FAQs）

为什么移动设备上图标显示不正确？

这通常是引入新库后遇到的问题，请确保按照以下步骤操作：

1. flutter pub get
2. flutter clean
3. 从您的设备/模拟器中删除应用程序
4. 重新构建并部署应用程序

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

图标名称中的数字表示图标的大小。

为什么运行示例应用程序时会遇到flutter --flow-control-collections are needed错误？

当应用程序未正确构建时通常会出现此错误。请尝试以下步骤：

1. flutter pub get
2. flutter clean
3. 在Android Studio中使缓存失效并重启

通过以上内容，希望能帮助您更好地理解和使用fluentui_system_icons插件。如果您有任何其他问题或需要进一步的帮助，请随时提问！