Использование пользовательского значка во Flutter

Flutter
Использование пользовательского значка во Flutter

1. Введение

FlutterКак одна из самых популярных технологий в настоящее время, она уже привлекла внимание большого количества энтузиастов технологий, и даже некоторых闲鱼,美团,腾讯И другие крупные компании были введены в эксплуатацию. Хотя его экология еще не полностью созрела,GoogleБлаго, скорость его развития уже достаточно поразительна, можно предвидеть, что в будущемFlutterСпрос на разработчиков также будет расти.

Будь то первопроходцы технологий или будущие тенденции, прошло 9102 года.Как фронтенд-разработчику, кажется, нет причин не попробовать это. Именно с таким менталитетом автор и начал изучатьFlutter, и построилсклад, весь последующий код будет размещаться на нем, добро пожаловать звездочка, учитесь вместе. Это серия статей о Flutter, которую я написал:

То, чем я собираюсь поделиться сегодня, на самом деле очень просто, мы все знаем, чтоFlutterвстроенный наборMaterial DesignСтильIcon图标, но для зрелого приложения этого обычно недостаточно. Для этого нам нужно ввести пользовательскийIcon图标.

Эта статья будетAnt DesignВозьмите библиотеку значков в качестве примера, чтобы представить, какFlutterВнедрите пользовательские значки в файлы .

2. Подготовка: файл шрифта

Так называемой «умной женщине трудно быть без риса», чтобы ввести собственный значок, сначала мы должны подготовить файл шрифта значка (.ttfсуффикс). Для больших компаний достаточно найти визуальных одноклассников. Но если это побочный проект, который мы делаем сами, или когда у нас нет ресурсов, мы можем обратиться кБиблиотека векторных иконок AlibabaВыберите свой любимый значок.

здесь сОфициальная библиотека иконок Ant DesignВ качестве примера (всего значков 600) мы добавляем в проект файл шрифта значка, выполнив следующие действия:

Добавить корзину -> Нажмите на корзину -> Загрузить код -> Распаковать -> Копировать на проект (переименование)

步骤1

步骤2

步骤3

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

Недостаточно просто скопировать файлы шрифтов в проект, нам нужно передать声明способ сказатьFlutterДоступны новые шрифты. Откройте корневой каталог проектаpubspec.yamlфайл, нашелfontsЭтот абзац:

To add custom fonts to your application, add a fonts section here, in this "flutter" section. Each entry in this list should have a "family" key with the font family name, and a "fonts" key with a list giving the asset and other descriptors for the font.

Комментарий позволяет нам добавить объявление пользовательского шрифта ниже этого абзаца текста.В сочетании с его закомментированным примером и текущим каталогом проекта мы можем настроить его следующим образом:

项目工程目录结构
.
├── README.md
├── android
│   └── app
├── assets
│   └── fonts
│       └── AntdIcons.ttf
├── flutter_training_app.iml
├── ios
│   └── Flutter
├── lib
│   └── main.dart
├── pubspec.lock
└── pubspec.yaml

字体声明
fonts:
  - family: AntdIcons
    fonts:
      - asset: assets/fonts/AntdIcons.ttf

Уведомление:После настройки обязательно выполнитеflutter packages getкоманда иrebuildэлемент, в противном случае файл шрифта не может быть использован.

4. Напишите пользовательские IconData

На самом деле пока что мы можем использовать иконку, которую только что скачали, например следующий код:

Icon(
  IconData(0xe77d, fontFamily: 'AntdIcons'),
  size: 20,
  color: Colors.black
)

вfontFamilyзначение'AntdIcons'это новый шрифт, который мы только что объявили, но в коде0xe77dОткуда взялись цифры? Откройте ранее скачанную и распакованную папку еще раз, там естьdemo_index.htmlФайл, откройте его в браузере, мы можем увидеть следующую картинку:

Unicode图标类型对照表

существуетUnicodeНа этой вкладке мы видим, что все значки тесно связаны между собой.Typeа такжеUnicode码Контрастные отношения. Итак, теоретически, какую иконку мы хотим использовать, просто скопируйте ееUnicodeПросто вставьте это в код.

Однако такой подход явно не очень дружелюбен. Во-первых, мы используемIconВы должны искать его в этой таблице отношений раньше; во-вторых, вы уверены, какой иконке соответствует эта строка чисел в следующий раз, когда вы увидите ее в коде? Итак, нам нужен более элегантный способ управления пользовательскими значками.

На самом деле практика тоже проста, мы можем создать собственный класс значков:

class AntdIcons {
  static const IconData checkCircle = IconData(0xe77d, fontFamily: 'AntdIcons');
  static const IconData CI = IconData(0xe77e, fontFamily: 'AntdIcons');
  static const IconData Dollar = IconData(0xe77f, fontFamily: 'AntdIcons');
  ...
}

Тогда метод использования становится:

Icon(
  AntdIcons.checkCircle,
  size: 20,
  color: Colors.black
)

Приведенный выше код полностью эквивалентен предыдущему прямому использованиюUnicode码Эффект. Но для того, чтобы использовать все иконки, мы должны обогатитьAntdIconsэтот класс. Для этого можно написать небольшой скрипт, вdemo_index.htmlЕго можно определить, запустив в консоли окна браузераIconDataкод:

function camelCase(str) {
  return str.replace(/[ -]+(\w)/g, (match, char) => char.toUpperCase());
}

function makeCode({name, code}) {
  return `static const IconData ${camelCase(name)} = IconData(0${code.substr(2, 5)}, fontFamily: 'antd-icons');\n`;
}

Array
  .from(document.querySelectorAll('.unicode .dib'))
  .map(element => {
    return {
      name: element.querySelector('.name').innerText,
      code: element.querySelector('.code-name').innerText
    };
  })
  .map(makeCode)
  .join('\n');

PS:В результатах вывода возможны отдельные небольшие ошибки из-за нестандартного именования автора иконки, которое можно изменить вручную.Полный файл можно посмотретьздесь.

Теперь пришло время повеселиться~~~

5. Резюме

В этой статье используется практическоеAnt DesignПример значка, детализируя какFlutterВведена индивидуальная иконка, надеюсь, вам поможет, о ~

Весь код в этой статье размещен по адресуздесь, вы также можете подписаться на меняBlog, добро пожаловать учиться вместе ~

Категории