Использование значков во Flutter... с созданием классов Dart одним щелчком мыши

Flutter
Использование значков во Flutter... с созданием классов Dart одним щелчком мыши

Flutter = Hu острый суп

предисловие

Для интерфейсных инженеров использование иконок в проекте слишком распространено. Во Flutter встроен компонент Icon, и все значки берутся изMaterialDesign Icons, большое количество, вполне достаточно.

Но нам все еще нужно использовать пользовательские значки в фактической разработке, поэтому, как использовать пользовательский IconFont в проектах Flutter, это то, чему вас научит эта статья.

объявить пользовательский шрифт

идти кwww.iconfont.cn/Выберите значок и добавьте его в购物车(Не паникуйте, это бесплатно).

Затем выберите Добавить в проект

Перейдите к проекту из Мои проекты и выберите Загрузить на локальный

Разархивируйте загруженный zip-пакет, скопируйте в него файл iconfont.ttf в свой проект флаттера, напримерflutter项目名称/assets/fonts/Внутри

Использовать пользовательские шрифты в трепетать, нам нужноpubspec.yamlДобавьте в файл следующее

fonts:
    - family: IconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf

Пожалуйста, обратите внимание на эту структуру и не пишите неправильно. Обычно вpubspec.yamlЕсли есть соответствующие комментарии, вы можете написать их в соответствии со структурой комментариев.

Использование IconData

Теперь мы можем использовать пользовательский значок шрифта в обычном режиме, как показано ниже.

Icon(
  IconData(0xe7b4, fontFamily: 'IconFont'),
  size: 20,
  color: Colors.black
)

где значение fontFamily 'IconFont' - это то, что мы только чтоpubspec.yamlНовый шрифт объявлен в , но на что указывает 0xe7b4 в коде? Вернитесь в папку, в которую вы ранее загрузили распакованный zip-пакет, дважды щелкните файл demo_index.html, чтобы открыть его в браузере, мы увидим следующий экран.

Код юникода, соответствующий значку, отмечен под каждым значком, поэтому, какой значок мы хотим использовать, просто скопируйте его код юникода в код.

Пользовательский класс значков

Но если у нас есть несколько иконок, очень недружелюбно использовать юникод... Я не знаю, что это такое, когда читаю код! Поэтому нам нужно сделать эту вещь более优雅Немного. Упакуйте их все в класс дротика для централизованного управления и используйте их по имени значка.

class IconFontIcons {
    static const IconData iconRotateRight = IconData(0xe9b3,fontFamily:'IconFont');
    static const IconData iconHeartFill = IconData(0xe8b3,fontFamily:'IconFont');
    static const IconData iconMinusSquare = IconData(0xe7b3,fontFamily:'IconFont');
    ...

Если вы используете его снова, это очень просто и интуитивно понятно

Icon(IconFontIcons.iconRotateRight)

Суммировать

Использовать iconfont во Flutter очень просто, надеюсь, эта статья поможет вам…

Кстати, проект iconfont генерируется автоматически.dartИнструменты класса также готовы для вас

пожалуйста, посмотрите следующую часть

Генерация класса IconFont одним щелчком мыши

инструкции

1. Скопируйте следующий код и добавьте его в избранное

javascript:function download(filename, text) {  var element = document.createElement('a');  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));  element.setAttribute('download', filename);  element.style.display = 'none';  document.body.appendChild(element);  element.click();  document.body.removeChild(element);}function toHump(name) {name = name.replace(/\s+/g,"-");    return name.replace(/\-(\w)/g, function(all, letter){        return letter.toUpperCase();    });}function getFlutterClass(){var str = "import 'package:flutter/widgets.dart';\r\n\r\n";str += "class IconFontIcons {\r\n";var arr = document.querySelectorAll(".icon-item");for (var i = arr.length - 1; i >= 0; i--) {var item = arr[i];var item_name = toHump(item.querySelectorAll(".icon-code")[1].textContent);var item_code = item.querySelectorAll(".icon-code")[0].textContent.replace(/\&\#/g,"0");item_code = item_code.replace(/\;/g,"");str += "    static const IconData "+item_name+" = IconData("+item_code+",fontFamily:'IconFontIcons');";str += "\r\n";}str += "}";return str;}  download("IconFontIcons.dart",getFlutterClass());

Браузер Chrome: щелкните правой кнопкой мыши на панели «Избранное» и выберите «Добавить веб-страницу».

Измените имя на «Создать IconFont.dart», скопируйте приведенный выше код и вставьте его в URL-адрес.

2. Открытьwww.iconfont.cn/

3. Перейдите к проекту, в котором вы хотите создать класс IconFont.

4. Щелкните URL-адрес, добавленный в Избранное на шаге 1.

После щелчка класс IconFont.dart будет автоматически сгенерирован и загружен.

  • Другими словами, Chrome будет подозревать, что его собственный файл .dart может причинить вред компьютеру... Не забудьте сохранить его.

Обратите внимание на Дашуая и займитесь полным стеком

Спасибо за вашу поддержку и поддержку 🌹🌹🌹

  • Это проект с открытым исходным кодом нашей командыelement3 1.7k star
  • Библиотека компонентов внешнего интерфейса, поддерживающая vue3.
Категории