Общие действия с виджетами

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

Вот они:

• Изменение размера
• Добавить подложку
• Настроить выравнивание
• Изменение цвета
• Открытие ящика из панели приложений
• Стилизация текста
• Изменение высоты строки
• Установка максимального количества строк
• Настройка расстояния между буквами
• Изменение типа изображения
• Показ изображения в полноэкранном режиме
• Настройка иконки
• Стилизация LlistTile
• Настройка заголовка ListTile
• Настройка подзаголовка ListTile
• Добавление ведущего значка ListTile
• Добавление границы
• Добавление действия
• Включение функции обновления
• Установка цвета из переменной
• Запуск действия при изменении выбора
• Копирование переменной
• Объединить текст
• Отзывчивая видимость
• Редактирование нескольких виджетов одновременно

Вы можете изменять значение свойства с помощью клавиш со стрелками вверх и вниз на клавиатуре. Совет: Используйте клавишу shift в сочетании с клавишами со стрелками, чтобы увеличивать или уменьшать значение на 10 единиц за раз.

Узнайте, как получить стиль от виджетов по умолчанию.

Узнайте, как показывать или скрывать виджеты.

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

Вот пример отображения различных навигационных меню на веб-странице и на мобильном устройстве:

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

Вот как это делается:

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

Чтобы настроить точки останова, откройте Настройки темы (в меню навигации) > Система дизайна > Точки останова и измените значения.

Например, если вы определите пользовательскую точку останова на уровне 575 пикселей, расположите ее между диапазонами «Mobile» и «Tablet». В этом случае, когда ваше приложение будет открыто на экране размером более 575 пикселей, макет будет настроен в соответствии с конфигурацией Tablet.

Кроме того, вы можете использовать эти значения точек останова во всем приложении для настройки свойств виджета в зависимости от размера экрана. Например, вы можете установить разные значения ширины и высоты для виджета Container в зависимости от того, какой размер экрана соответствует маленькому, среднему или большому.

Получить доступ к значениям точек останова можно через меню Set from Variable. Вот пример установки ширины Container в зависимости от размера экрана.

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

Управлять прозрачностью можно с помощью свойства Панель свойств > Видимость > Непрозрачность. Оно принимает значение от 0 до 1. Например, 0 означает полную прозрачность, 1 — непрозрачность, а 0,5 — полупрозрачность.

Паддинг — это пустое пространство вокруг внешней стороны виджета.

Чтобы добавить подложку, выполните следующие действия:

1. Выберите виджет в дереве виджетов или в области холста.
2. Перейдите на панель свойств и перейдите в раздел Padding & Alignment.
3. Введите значения L(left), T(top), R(right), B(bottom).
4. Вы можете использовать кнопку  Lock для изменения всех значений вместе и кнопку refresh() для сброса значений.
5. Используйте кнопку со значком обновления, чтобы сбросить все значения.

Если вы предпочитаете смотреть видеоуроки, то это руководство для вас:

Свойство Alignment помогает позиционировать виджет.

Ниже перечислены варианты выравнивания:

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

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

Чтобы изменить выравнивание:

1. Выберите виджет и перейдите на панель свойств > раздел Padding & Alignment.
2. Используйте поле выравнивания, чтобы выровнять виджет по фиксированной позиции, или введите значение непосредственно в поле ввода «Горизонталь» и «Вертикаль».

Если вы предпочитаете смотреть видеоуроки, то это руководство для вас:

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

Чтобы изменить размер, перейдите к свойствам Ширина и Высота, после чего у вас будет три варианта установки размера:

1. Для конкретного размера выберите PX и введите нужный размер.
2. Для размера, основанного на размере экрана, выберите % и введите процент.
3. Чтобы виджет заполнил весь экран по ширине или высоте, нажмите на символ бесконечности (∞).

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

Распределить доступное пространство внутри колонки или строки можно с помощью следующих опций:

• Гибкий (): При этом варианте виджет сначала отображается в соответствии с заданной шириной и высотой, а затем расширяется до доступного пространства (т.е. по горизонтали для Row и по вертикали для Column).
• Развернутый (): Эта опция расширяет виджет до доступного пространства (т.е. по горизонтали для Row и по вертикали для Column), игнорируя ширину и высоту виджета.
• Flex: Эта опция доступна только при наличии нескольких виджетов и установленной опции Flexible или Expanded. Эта опция определяет долю пространства, отводимого каждому виджету. Например, если виджет A имеет Flex = 1, а виджет B — Flex = 2, то A будет занимать 1/3 доступного пространства, а B — 2/3 пространства.

Для определения размера виджетов внутри столбца или строки:

1. Выберите виджет, а затем выберите вариант размера: Flexible или Expanded.
2. Попробуйте добавить значение Flex, например, Widget A Flex = 1 и Widget B Flex = 2.

Если вы предпочитаете смотреть видеоуроки, то это руководство для вас:

Чтобы изменить цвет для любого свойства виджета:

1. Перейдите к свойству виджета, которое позволяет задать цвет.
2. Щелкните на выбранном цвете, чтобы выбрать новый цвет или ввести шестнадцатеричный код напрямую.
3. По умолчанию отображаются цвета темы. Просто нажмите на цвет, чтобы применить его.
4. Для создания пользовательского цвета перейдите на вкладку «Пользовательский цвет», выберите нужный цвет, а затем нажмите «Использовать цвет».
5. Вы также можете задать цвет из переменной.

Чтобы получить доступ к Drawer без виджета AppBar, пользователям нужно провести пальцем по странице. Однако это может сбить с толку, поскольку не будет никаких указаний на существование Drawer. Добавление виджета AppBar решает эту проблему, автоматически отображая значок меню (трехстрочный значок), сигнализирующий о наличии Drawer. Это повышает осведомленность пользователей и улучшает взаимодействие с функцией Drawer.

Для стилизации текста вы можете использовать любой предопределенный стиль или создать собственный. Вот как это делается:

• Тематический стиль текста: Используйте этот параметр для применения единого стиля в соответствии с темой вашего приложения.
• Семейство шрифтов: Используйте этот параметр, чтобы установить шрифт, подходящий к вашему дизайну.
• Вес шрифта: Используйте этот параметр для настройки толщины текста от светлого до жирного.
• Стилизация: Используйте этот параметр для применения таких стилей, как курсив, подчеркивание или зачеркивание.
• Размер шрифта: Используйте этот параметр для установки размера текста.
• Цвет текста: Используйте эту опцию для установки цвета текста.
• Высота строки: Используйте этот параметр для установки высоты текста (например, при значении 1,5 высота строки будет на 50 % больше размера шрифта).
• Расстояние между буквами: С помощью этого параметра можно регулировать расстояние между отдельными буквами.
• Выравнивание текста: с помощью этого параметра можно установить выравнивание текста по левому краю, по центру, по правому краю или выравнивание по центру.

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

Чтобы установить максимальное количество строк, перейдите на панель свойств > Свойства текста > введите значение Max Lines.

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

Вот как можно изменить тип изображения:

• Перейдите на панель свойств > Изображение > выпадающий список Тип изображения. Нажмите на Network (внутри раскрывающегося списка) и выберите Asset.
• Теперь найдите свойство Asset Image, нажмите на кнопку Upload Image, выберите изображение и загрузите его. Совет: Вы также можете перетащить изображение непосредственно в конструктор для загрузки.

Если вы хотите использовать одно и то же изображение несколько раз в своем приложении, вам не нужно загружать одно и то же изображение несколько раз. Загруженное изображение можно использовать и для других виджетов Image.

Чтобы использовать загруженное изображение:

1. Выберите виджет в дереве виджетов или в области холста.
2. Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение».
3. Найдите выпадающий список Тип изображения. Нажмите на Сеть (внутри выпадающего списка) и выберите Актив.
4. Нажмите на Нет выбора актива (внутри раскрывающегося списка) и выберите изображение.

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

Чтобы сделать изображение расширяемым, перейдите на панель свойств > Изображение > включите тумблер Сделать расширяемым.

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

Чтобы установить темный режим для вашего изображения:

1. Выберите виджет Изображение > перейдите на панель свойств > установите Тип изображения на Актив.
2. Включите опцию Установить темный режим.
3. Выберите Светлый режим ассета и Темный режим ассета. Вы также можете загружать изображения непосредственно отсюда.

Вот как вы можете настроить значок:

• Чтобы изменить значок по умолчанию, перейдите на панель свойств > найдите свойство Icon > нажмите на значок по умолчанию > найдите и выберите значок.
• Чтобы изменить его размер, используйте свойство Icon Size.
• Чтобы изменить его цвет, используйте свойство Icon Color.

Чтобы изменить цвет фона:

1. Выберите ListTile в дереве виджетов или в области холста.
2. Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Свойства стиля.
3. Найдите свойство Color, нажмите на поле рядом с #f5f5f5, выберите цвет, а затем нажмите Use Selected Color. Или нажмите на #f5f5f5 и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

Content Padding добавляет пространство между содержимым элемента и границей ListTile.

Чтобы добавить подложку для содержимого:

1. Перейдите на панель свойств > Свойства стиля > Отступы содержимого.
2. Введите значения для Left (L), Top (T), Right (R), Bottom (B).
3. Чтобы применить одинаковые отступы со всех сторон, переключитесь на опцию Uniform Padding. Затем вы можете регулировать величину отступов, перемещая ползунок или вводя нужное значение напрямую.
4. Чтобы сбросить все значения, воспользуйтесь кнопкой со значком обновления.

Если у вас длинный список, и вы хотите уместить на экране больше содержимого, вы можете использовать свойство dense, чтобы немного уменьшить высоту ListTile.

Чтобы уменьшить высоту, перейдите на панель свойств > Свойства стиля > включите тумблер «Плотный».

Посмотрите, как можно изменить стиль заголовка ListTile.

Узнайте, как можно изменить стиль подзаголовка ListTile.

Значок лидерства отображается в начале (в левой части) ListTile. Чтобы добавить ведущий значок, перейдите на панель свойств > Свойства ведущего значка и установите значок в соответствии с инструкциями, приведенными здесь.

Чтобы добавить границу к любому виджету:

1. Найдите свойство Border Color и измените цвет, используя инструкции здесь.
2. Чтобы создать закругленную границу, используйте свойство Border Radius.
3. Введите значения для TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый).
4. Чтобы применить одинаковый радиус для всех сторон, переключитесь на параметр Равномерный радиус. Затем вы можете настроить радиус, перемещая ползунок или вводя нужное значение напрямую.
5. Чтобы сбросить все значения, используйте кнопку со значком обновления.
6. Чтобы увеличить толщину границы, используйте свойство Border Width.

Если в прокручиваемом виджете включен одноразовый запрос для бэкенд-запроса, он не будет обновлять список при обновлении элементов в бэкенде. Чтобы решить эту проблему, добавьте функцию pull-to-refresh.

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

Чтобы включить функцию обновления прокрутки:

1. Выберите виджет с возможностью прокрутки, например ListView, GridView или StaggeredView.
2. Перейдите на панель свойств и выберите Backend Query.
3. Откройте уже добавленный запрос (например, коллекцию запросов или вызов API) и убедитесь, что включен однократный запрос.
4. Включите тумблер Enable Pull to Refresh. Это автоматически добавит действие Refresh Database Request при жесте pull to refresh.

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

Чтобы задать цвет из переменной:

• Перейдите к свойству виджета, которое позволяет задать цвет.
• В меню Set from Variable вы можете выбрать источник цвета. Ниже приведен пример установки цвета из переменной состояния приложения.

Вот еще один пример установки цвета из Условного значения.

Здесь вы увидите, как вызвать действие при изменении выбора для любого виджета формы, такого как Dropdown, RadioButton, ChoiseChips, Slider и RatingBar.

Для этого:

• Выберите виджет.
• Выберите Действия на панели свойств и нажмите + Добавить действие.
• Вы заметите, что для параметра Тип действия (он же обратный вызов) уже установлено значение При выборе. Это означает, что действия, добавленные в этом поле, будут вызываться при каждом изменении выбора.
• Теперь вы можете добавить сюда любое действие.

Вот пример, показывающий сообщение на панели закусок при изменении выбора Dropdown.

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

Чтобы скопировать-вставить переменную:

1. Откройте меню Set from Variable и выберите значок Variable Options.
2. Выберите опцию Копировать переменную.
3. Переместитесь в то место, куда вы хотите вставить переменную, и откройте меню Set from Variable.
4. Нажмите на значок Вставить переменную.
5. Нажмите кнопку Подтвердить.

С его помощью можно объединить несколько текстовых сегментов в один. Например, во фразе «У вас есть 3 уведомления» слова «у вас есть» и «уведомления» являются статическими текстами, а «3» — динамическим значением, полученным из переменной.

Чтобы отобразить комбинированный текст:

1. Выберите свойство виджета, которое может отображать текст (например, Text, TextField).
2. Откройте меню Set from Variable и используйте опцию Combine Text.

Мы позволяем вам изменять свойства нескольких виджетов одновременно, а не редактировать каждый из них по отдельности. Это может быть эффективным и экономящим время способом внесения массовых изменений в пользовательский интерфейс приложения.

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

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

Также можно добавлять изображения непосредственно из Unsplash прямо в панели свойств. Для этого просто щелкните на значке поиска, найдите и выберите изображение. Совет: Вы также можете выбрать размер добавляемого изображения (например, Маленькое, Обычное, Полное).

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

Чтобы применить одинаковый интервал в начале и конце элементов, включите опцию Применить к началу и концу. Если требуется разный интервал, используйте свойства Начальный интервал и Конечный интервал.

Когда это свойство равно true, даже если содержимое внутри прокручиваемого виджета, такого как ListView или GridView, не переполняет видимую область, пользователь все равно может попытаться прокрутить его. Содержимое может немного сдвинуться, а затем отскочить назад, что особенно заметно на iOS с эффектом отскока.

В большинстве случаев крайний прокручиваемый виджет (обычно тот, который занимает больше всего места или весь экран) устанавливается как основной, а внутренние прокручиваемые виджеты — нет. Например, если структура виджетов выглядит следующим образом: Column > ListView, вы должны сохранить Column в качестве основного, а ListView — в качестве не основного.

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

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

Для этого:

1. Перейдите в раздел «Настройки и интеграция» > «Общие» > «Активы приложений» и загрузите изображение ошибки.
2. Выберите виджет Image или CircleImage, перейдите на панель свойств > Image > включите опцию Show Error Image on Failure.