📜  flutter 图标(1)

📅  最后修改于: 2023-12-03 15:00:48.818000             🧑  作者: Mango

Flutter 图标

Flutter 提供了很多内置的图标资源,可以在应用程序中使用。此外,Flutter 还支持使用自定义图标。

内置图标

Flutter 内置了很多流行的图标资源,可以通过 Icons 类访问。以下是一些常用内置图标和它们的 ID:

| 图标 | ID | | ---------------- | ----------- | | 3d_rotation | Icons.3d_rotation | | ac_unit | Icons.ac_unit | | accessibility | Icons.accessibility | | accessible | Icons.accessible | | account_balance | Icons.account_balance | | account_box | Icons.account_box | | account_circle | Icons.account_circle | | add | Icons.add | | add_a_photo | Icons.add_a_photo | | alarm | Icons.alarm | | all_inclusive | Icons.all_inclusive | | android | Icons.android | | announcement | Icons.announcement | | apps | Icons.apps | | archive | Icons.archive | | arrow_back | Icons.arrow_back | | arrow_downward | Icons.arrow_downward | | arrow_drop_down | Icons.arrow_drop_down | | arrow_drop_up | Icons.arrow_drop_up | | arrow_forward | Icons.arrow_forward | | arrow_left | Icons.arrow_left | | arrow_right | Icons.arrow_right | | arrow_upward | Icons.arrow_upward | | art_track | Icons.art_track | | attach_file | Icons.attach_file | | attach_money | Icons.attach_money | | attachment | Icons.attachment | | audiotrack | Icons.audiotrack | | autorenew | Icons.autorenew |

以下是如何在 Flutter 中使用图标的代码片段:

Icon(Icons.add)

上面的代码将在 Flutter 应用程序中添加一个加号图标。可以通过在 Icon 构造函数中提供不同的图标 ID 来使用其他内置图标。

自定义图标

Flutter 还支持使用自定义图标,可以将自定义字体文件添加到应用程序中并将其用作图标。这样,可以使用完全自定义的图标来定制应用程序。

以下是使用自定义图标的步骤:

  1. 将自定义字体文件(通常是 .ttf 文件)添加到您的 Flutter 应用程序项目中。

  2. 将字体文件注册为 Flutter 应用程序的少量字体之一。

MaterialApp(
  theme: ThemeData(
    fontFamily: 'Custom',
  ),
  home: MyHomePage(),
);

上面的代码将 'Custom' 字体注册为应用程序的字体之一。请确保提供的字体名称与字体文件中的名称匹配。

  1. 创建 IconData 对象以引用自定义图标。
class CustomIcons {
  static const IconData myCustomIcon = IconData(
    0xe800,
    fontFamily: 'Custom',
  );
}

上面的代码将创建一个名为 myCustomIcon 的自定义图标,字体编码为 0xe800,字体名称为 'Custom'

  1. Icon 控件添加到您的应用程序中,并使用 IconData 对象引用自定义图标。
Icon(CustomIcons.myCustomIcon)

最后一行代码将添加一个自定义图标到您的应用程序,该图标使用 CustomIcons.myCustomIcon 引用。

总结

Flutter 支持使用内置图标和自定义图标。使用内置图标很简单 - 只需提供内置 ID 即可。自定义图标需要以下步骤:

  1. 添加自定义字体文件到应用程序中

  2. 注册自定义字体

  3. 创建 IconData 对象引用自定义图标

  4. 在您的应用程序中使用 Icon 控件显示自定义图标。

以上就是关于 Flutter 图标的介绍。感谢您的阅读!