Flutter图标插件sf_symbols的使用

使用方法

使用 SfSymbol 就像使用其他任何小部件一样，只需选择名称、权重、颜色和大小即可。

大小对应于 UIImage.SymbolConfiguration 中的 pointSize。例如，大小为 40 的 SF 符号将大致渲染为 40pt x 40pt（iOS 中的点）。

SfSymbol(
    name: 'camera.aperture',
    weight: FontWeight.w900,
    color: Colors.pink,
    size: 40,
)

工作原理

此包通过从 iOS 本机渲染 SF 符号作为纹理，然后在 Flutter 中重新定位和调整纹理的大小来实现。更多详细信息，请参阅 Flutter 中的 texture 类。

路线图

• 支持 macOS

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 SfSymbol：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool show = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SF Symbols'),
        ),
        body: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            setState(() {
              show = !show;
            });
          },
          child: show
              ? Center(
                  child: SingleChildScrollView(
                    child: Wrap(
                      spacing: 0,
                      runSpacing: 20,
                      children: [
                        for (var name in [
                          'camera',
                          'camera.macro',
                          'camera.aperture',
                          'camera.filters',
                        ])
                          for (var color in [
                            Colors.blueAccent,
                            Colors.pinkAccent,
                            Colors.greenAccent,
                            // Colors.amberAccent
                          ])
                            for (var weight in FontWeight.values)
                              SizedBox(
                                width: 40,
                                child: SfSymbol(
                                  size: 40,
                                  weight: weight,
                                  color: color,
                                  name: name,
                                ),
                              ),
                      ],
                    ),
                  ),
                )
              : null,
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，显示了多个不同名称、颜色和权重的 SF 符号。点击屏幕时，这些符号会隐藏或显示。希望这个示例能帮助你更好地理解和使用 sf_symbols 插件。