Похоже, довольно много людей хотят изменить встроенный виджет Flutter ExpansionTile, поэтому мы сделаем это прямо сейчас - и это легко.

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

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

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

Начальное примечание. После внесения изменений в файл CustomExpansionTile вам, вероятно, придется перезагрузить приложение в горячем режиме, чтобы они отобразились.

Шаг 1. Вставьте стандартный ExpansionTile, а затем откройте его исходный код.

Когда вы вставляете виджет в файл .dart, вы можете просмотреть его исходный код, наведя на него курсор и нажав CTRL (CMD) + левый щелчок.

Это должно открыть файл «extension_tile.dart» в вашем редакторе. Это то, что скрывается за ExpansionTile.

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

Шаг 2. Создайте собственную версию файла ExpansionTile

На панели проекта щелкните левой кнопкой мыши каталог «lib» и выберите «Новый файл» («Новый» - ›« Файл »или« Файл Dart »для Android Studio).

Назовите этот файл как хотите, но сохраните его как файл .dart. Я назову его custom_expansion_tile.dart.

Теперь вернитесь к исходному файлу «extension_tile.dart» и нажмите CTRL (CMD) + A, чтобы выбрать все, а затем скопируйте все это в буфер обмена.

Вернитесь к своему файлу custom_expansion_tile.dart и вставьте все в него. Закройте исходный файл extension_tile.dart, чтобы мы случайно не изменили его.

Шаг 3. Исправьте ошибки

Вы должны заметить, что в вашем новом файле custom_expansion_tile.dart сразу же есть много ошибок. Мы исправим их в два этапа.

Сначала удалите шесть импортированных вверху элементов (как показано на изображении выше):

Во-вторых, импорт 'package:flutter/material.dart

material.dart импорт будет единственным, что вам нужно.

И теперь ваши ошибки должны исчезнуть.

Шаг 4: Назовите его

В вашем новом файле custom_expansion_tile.dart нам нужно изменить имя класса, поскольку ExpansionTile уже существует (исходный файл).

Выберите «ExpansionTile» в объявлении класса и щелкните правой кнопкой мыши. В Visual Studio нажмите «Изменить все вхождения». В Android Studio нажмите «Рефакторинг -› Переименовать ». Измените имя на любое, по которому вы хотите ссылаться на виджет (я буду придерживаться своего соглашения об именах и назову его CustomExpansionTile).

Теперь это будет выглядеть примерно так:

Если с переименованием все прошло успешно, ошибок быть не должно. Если ошибки существуют, возможно, где-то в файле есть ошибка имени класса.

Шаг 5. Добавьте ссылку на него в пользовательском интерфейсе

Вернитесь к своему main.dart файлу и импортируйте новый CustomExpansionTile файл.

Перейдите к своей build функции и либо замените стандартный ExpansionTile, который вы впервые вставили, либо просто добавьте его над первым Text виджетом в Column (или где бы вы ни разместили его в своем проекте).

Теперь мы готовы настроить его так, как нам нужно.

На этом этапе вы можете настроить CustomExpansionTile и, если вы уже знаете, как это сделать, вам не нужно продолжать работу с этой статьей.

Шаг 6: сделайте это своим

Теперь у вас есть все необходимое для изменения CustomExpansionTile, поэтому я просто покажу небольшой пример этого.

Для справки, вот как работает исходный ExpansionTile:

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

Это простое решение. Перейдите в файл custom_expansion_tile.dart и прокрутите вниз до _buildChildren method:

Заметили что-нибудь? Если параметр trailing не равен нулю, то RotationTransition не учитывается, поэтому ваш собственный значок сейчас не вращается.

Чтобы заставить вращаться собственный значок, измените свое trailing назначение на следующее:

trailing: widget.trailing != null
    ? RotationTransition(
        turns: _iconTurns,
        child: widget.trailing,
    )
    : null,

Вы просто отменили нулевую проверку и изменили дочерний элемент на свой пройденный значок.

После того, как вы измените это и выполните горячую перезагрузку, вы получите:

Готово 🥳

Очевидно, вы можете изменить анимацию в новом CustomExpansionTile в соответствии со своими потребностями и применить это к другим параметрам.

Совет по форматированию:

Если вам нужно изменить цветовую схему для вашего пользовательского ExpansionTile, вы можете либо жестко закодировать его в файле ExpansionTile, либо заключить ExpansionTile в Theme widget.

Вот main.dart код, показывающий, как обернуть ваш пользовательский ExpansionTile:

И вот мой CustomExpansionTile, который вы видите на первом гифке, для справки: CustomExpansionTile.

Быстрый совет, не относящийся к теме:

Когда вы создаете новый проект Flutter или копируете исходный код, как мы это делали в этом руководстве, вы встречаетесь с стеной комментариев в файле main.dart. Чтобы быстро их удалить:

  1. В Visual Studio нажмите CTRL (CMD) + H. В Android Studio нажмите CTRL (CMD) + R. Откроется меню «Найти и заменить» в файле Main.dart.
  2. Введите «//.*» в строку поиска (без кавычек). Это регулярное выражение (Regular Expression) для выбора всего в строке после «//» (как вы, наверное, знаете, это синтаксис комментариев в Dart).
  3. Оставьте панель замены (нижнюю панель поиска) пустой.
  4. Включите «Использовать регулярное выражение» в Visual Studio или установите флажок «Регулярное выражение» в Android Studio.
  5. Нажмите «Заменить все», после чего вы сможете переформатировать документ, и он будет аккуратным и аккуратным. Предупреждение: я предлагаю вам делать это только с новым файлом Flutter, поскольку регулярное выражение «//.*» также будет соответствовать URL-адресам (https: // www… .).

Надеюсь, это поможет кому-нибудь в его собственном путешествии по ExpansionTile на всю жизнь. Удачи.