Перейти к основному содержимому

Файл кода

FlutterFlow позволяет добавлять собственные пользовательские файлы Dart с классами и перечислениями. Это означает, что вы можете создавать повторно используемые строительные блоки для более удобного управления данными и логикой вашего приложения. С помощью пользовательских классов вы можете создавать собственные типы данных, использовать их свойства в интерфейсе, вызывать методы в потоках действий и многое другое.

Основные сценарии использования​

  • Пользовательские модели: Определите собственные модели данных, такие как UserProfile, Product или Order, и используйте их в приложении.
  • Бизнес-логика: Добавьте повторно используемые вспомогательные методы, такие как расчеты налогов, форматирование или условные вычисления.
  • Повторно используемые перечисления: Определите перечисления и используйте их в условиях интерфейса и выпадающих списках.
Ограничения
  • Отсутствие обобщений: Классы с обобщенными типами (например, class ApiResponse<T> {}) в настоящее время не поддерживаются.
  • Отсутствие параметров с типом функции: Методы или поля, имеющие типы функций в качестве параметров или полей, игнорируются (например, void Function(int) onTap).
  • Отсутствие расширений: Расширения Dart (например, extension StringX on String { … }) пока не поддерживаются.

Создание пользовательского класса​

Чтобы добавить пользовательский класс, перейдите в раздел Custom Code в левом меню навигации, нажмите кнопку plus (+) и выберите Code File. Укажите имя файла, добавьте свой код и нажмите кнопку Save. Теперь необходимо проверить код в редакторе, чтобы выявить базовые синтаксические ошибки. Если ошибок нет, нажмите кнопку Parse. FlutterFlow просканирует ваш код и автоматически обнаружит поддерживаемые классы и перечисления.

Вот пример добавления пользовательского класса Review:

Вот фрагмент кода пользовательского класса Review:

class Review {
  String id;
  String productId;
  String userId;
  String userName;
  String comment;
  double rating; // out of 5
  ReviewStatus reviewStatus;
  DateTime date;
  int helpfulCount = 0;

  Review(
    this.id,
    this.productId,
    this.userId,
    this.userName,
    this.comment,
    this.rating,
    this.reviewStatus,
    this.date,
  );

  // Method: Get a short version of the comment
  String shortComment() {
    if (comment.length <= 50) return comment;
    return comment.substring(0, 47) + "...";
  }

  // Method: Get formatted date as string (e.g., "2024-05-22")
  String formattedDate() {
    return "${date.year}-${_twoDigits(date.month)}-${_twoDigits(date.day)}";
  }

  String _twoDigits(int n) {
    return n >= 10 ? "$n" : "0$n";
  }

  // Method: Check if review is positive (4 stars or more)
  bool isPositive() {
    return rating >= 4.0;
  }

  // Method: Check if review is recent (within last 30 days)
  bool isRecent() {
    final now = DateTime.now();
    return now.difference(date).inDays <= 30;
  }

  // Method: Mark this review as helpful
  void markHelpful() {
    helpfulCount += 1;
  }
}
подсказка

Вы также можете включать операторы import и обращаться к сгенерированным классам в своих файлах пользовательских классов. Подробнее об этом см. в примерах по доступу к сгенерированным классам.

Создание экземпляра пользовательского класса​

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

  • Класс — это как чертеж или шаблон. Например, класс Review описывает, что такое отзыв, но сам по себе не содержит никакой реальной информации об отзыве.

  • Экземпляр (или «объект») — это реальный, используемый элемент, созданный на основе этого чертежа. См. фрагмент кода ниже:

    Review review1 = Review(
      'r001',
      'p123',
      'u456',
      'Alex Morgan',
      'Great quality T-shirt!',
      4.5,
      DateTime(2025, 5, 22),
      3,
      ReviewStatus.approved,
    );

  • В FlutterFlow экземпляр пользовательского класса будет храниться в переменных состояния вашего приложения, страницы или компонента.

  • Вы можете создавать несколько экземпляров одного и того же класса, повторно используя одну и ту же структуру несколько раз, каждый с разными данными отзыва.

При создании экземпляра класса вы можете:

  • Хранить реальные детали отзыва.
  • Обращаться к полям и обновлять их (например, review1.rating или review1.comment).
  • Вызывать методы, которые выполняют действия с этими данными (например, review1.markHelpful() или review1.shortComment()).

Чтобы создать экземпляр пользовательского класса, сначала создайте переменную состояния (типа Custom Class), которая будет хранить экземпляр. Затем, чтобы создать экземпляр и добавить его в переменную состояния, откройте диалог Set from Variable и выберите Create Custom Class Instance. Выберите класс, который хотите использовать, затем укажите имя класса из выпадающего списка Constructor. После этого задайте значения для каждого из обязательных полей.

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

После успешного добавления пользовательского класса вы можете обращаться к его полям и методам в Variable Dialog, вызывать методы в Action Flow Editor, назначать экземпляры переменным состояния, передавать их в параметры страниц или компонентов, а также использовать значения перечислений в выпадающих списках или условиях.

Пользовательский класс как тип данных​

Вы можете выбрать свой пользовательский класс в качестве типа для переменных, состояния или параметров, точно так же, как пользовательский тип данных.

custom-class-as-data-type.avif

Доступ к полям и методам​

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

access-fields-methods.avif

Действие Set Field​

Используйте действие Set Field, чтобы обновить конкретное свойство экземпляра пользовательского класса. Например, вы можете установить review.comment = 'Great fit and quality!', когда пользователь обновляет отзыв, чтобы интерфейс мгновенно отразил новый комментарий.

Действие Call Method​

Используйте действие Call Method, чтобы вызвать метод, определенный в вашем пользовательском классе. Например, если класс Comment имеет метод markHelpful(), вы можете запустить его, когда пользователь нажимает кнопку «Helpful», чтобы зафиксировать взаимодействие.

Использование статических членов​

Иногда вам может потребоваться определить поля и методы, общие для всего приложения. В таких случаях статические поля и методы static идеальны. Поскольку они привязаны к классу, а не к экземпляру, статические члены доступны глобально, например, для форматирования, расчетов или глобальной конфигурации.

Этот подход обычно используется для бессостоявательных классов-утилит, где требуется общая функциональность по всему приложению. Например, посмотрите на класс ниже:

class Utils {
  static int square(int x) => x * x;
}

Класс Utils содержит статический метод square, который возвращает квадрат числа без необходимости создания объекта класса.

Вот еще несколько примеров, чтобы лучше понять:

  • Класс StringFormatter ниже предоставляет повторно используемые статические методы для приведения текста к заглавным буквам, преобразования в нижний регистр или форматирования в snake_case.

    class StringFormatter {
      static String lastFormatted = '';
      static int formatCount = 0;
      
      static String capitalize(String input) =>
          input[0].toUpperCase() + input.substring(1);

      static String toLowerCase(String input) => input.toLowerCase();

      static String toSnakeCase(String input) =>
          input.replaceAll(' ', '_').toLowerCase();
    }

  • Класс MathHelper предлагает удобные статические методы для расчета налогов, применения скидок, поиска процентов и округления чисел.

    class MathHelper {
      static double calculateTax(double amount) => amount * 0.18;

      static double applyDiscount(double amount, double discountPercent) =>
          amount - (amount * discountPercent / 100);

      static double calculatePercentage(double part, double total) =>
          (part / total) * 100;

      static int roundOff(double value) => value.round();
    }
подсказка

Вы можете комбинировать как статические, так и экземплярные члены в одном классе. Статические члены общие для всех экземпляров, в то время как экземплярные члены содержат данные, специфичные для каждого объекта. Например, посмотрите на класс ниже:

class Review {
  static List<String> flaggedWords = ['bad', 'spam', 'fake'];
  
  String id;
  String userId;
  String comment;
  int helpfulCount = 0;

  Review(
    this.id,
    this.userId,
    this.comment
  );

  static bool isCommentAppropriate(String input) {
    return !flaggedWords.any((word) => input.toLowerCase().contains(word));
  }
  
  void markHelpful() {
    helpfulCount += 1;
  }
}
  • flaggedWords — это статический список, используемый для всех отзывов.
  • isCommentAppropriate() — это статический метод, который можно использовать без создания экземпляра Review, полезен для проверки комментариев перед их сохранением.
warning

Статические члены мощны, но их следует использовать с осторожностью. Чрезмерное использование статических методов может привести к менее гибкому коду и потенциальным проблемам, особенно когда логика требует доступа к состоянию или должна развиваться со временем. Применяйте статические методы только в том случае, если логика действительно независима и не зависит от данных, специфичных для экземпляра.

Доступ к статическим полям и методам​

Вы можете обращаться к статическим данным класса и методам непосредственно через меню Set from Variable.

static-class-methods.avif

Действие Set Static Field​

Используйте действие Set Static Field, чтобы обновить статическое поле пользовательского класса. Например, если у вас есть класс MathHelper со статическим полем amount, вы можете установить его с помощью входного значения, когда пользователь вводит цену. Это позволяет хранить значение глобально и использовать его в различных расчетах.

Действие Call Static Method​

Используйте действие Call Static Method, чтобы запустить статический метод вашего класса. Например, вы можете вызвать MathHelper.calculateTax(amount), чтобы вычислить налог на заданную сумму во время действия оформления заказа, без необходимости создания экземпляра класса.

Пользовательские перечисления​

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

Например, вы можете определить перечисление ReviewStatus со значениями вроде pending, approved и rejected. Вот фрагмент кода для него:

enum ReviewStatus {
  pending,
  approved,
  rejected,
}

custom-enums.avif

Вы можете обращаться к пользовательским перечислениям из меню Set from Variable > раздел Custom Enum. Вы увидите ваш файл Dart, перечисленный по имени. Выберите перечисление, которое хотите использовать, например ReviewStatus, а затем выберите конкретное значение, которое хотите назначить.

Советы и лучшие практики​

  • Делайте файлы пользовательских классов модульными и сфокусированными; идеально — один класс на файл для лучшей организации и повторного использования.
  • Избегайте продвинутых возможностей Dart, не поддерживаемых парсером FlutterFlow, таких как обобщения или поля с типом функции.
  • Перепарсывайте код после внесения изменений, чтобы FlutterFlow правильно обновил проанализированную структуру.
  • Документируйте код комментариями, чтобы пользовательские классы было проще понимать и поддерживать со временем.

Часто задаваемые вопросы​

Можно ли добавлять пользовательские классы (файлы кода) в проект библиотеки?

Да, можно. При импорте проекта библиотеки любые пользовательские файлы кода, которые вы определили, будут проанализированы, и полученные классы станут доступны для использования в потребляющем проекте.