Таб бар

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

Чтобы добавить виджет TabBar в свой проект:

Просто перетащите виджет TabBar с вкладки Элементы макета (в панели виджетов) или добавьте его непосредственно из дерева виджетов.

По умолчанию TabBar поставляется с 3 вкладками под названиями Пример 1, Пример 2, Пример 3 и виджетом текста внутри всех страниц TabBar под названиями Вид вкладки 1, Вид вкладки 2 и Вид вкладки 3.

Вы можете настроить стандартную панель вкладок в соответствии с вашим дизайном. Вы можете настроить как виджет Tab, так и виджет TabBar Page.

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

• Выберите первую вкладку в дереве виджетов или в области холста.
• Перейдите в редактор свойств, прокрутите вниз до свойства Tab Label в разделе Text. Измените название с Пример 1 на Полет.
• Чтобы установить иконку, нажмите на кнопку None (ниже раздела Text). Найдите и выберите иконку с именем Flight.
• Измените Размер значка на любое значение (под значком полета).
• Нажмите на поле рядом с Unset (в разделе Icon Color), выберите цвет, а затем нажмите Use Selected Color (Использовать выбранный цвет). Вы также можете нажать на Unset и ввести Hex-код напрямую.
• Чтобы получить некоторое пространство вокруг значка, введите значение в разделе Icon Margin.

Чтобы настроить страницу TabBar:

• Выберите первую страницу TabBar Page из дерева виджетов или из области холста.
• Внутри страницы TabBar Page вы можете заменить виджет «Текст» любым виджетом по вашему выбору.
• Пока просто измените название виджета Текст на Список полетов.
• Расположите виджет «Текст» по центру, введя значение 0 как в разделе «Выравнивание по горизонтали«, так и в разделе «Выравнивание по вертикали«.

Чтобы изменить TabBar, отображаемый в UI Builder:

• Выберите виджет TabBar в дереве виджетов или в области холста.
• Перейдите в Редактор свойств и определите раздел Активная вкладка.
• Измените его на любую вкладку из предложенных вариантов.

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

Чтобы добавить новую вкладку:

• Выберите виджет TabBar в дереве виджетов или в области холста.
• Перейдите в Редактор свойств и определите раздел Активная вкладка.
• Нажмите на выпадающий список и выберите + Добавить вкладку.

Чтобы удалить любую существующую вкладку:

• Выберите вкладку (которую вы хотите удалить) из дерева виджетов или из области холста.
• Нажмите кнопку Delete на клавиатуре, и вкладка будет удалена из дерева виджетов. Вы также можете удалить вкладку, щелкнув правой кнопкой мыши в дереве виджетов и выбрав команду Вырезать.

Панель свойств можно использовать для настройки поведения виджета TabBar.

Ниже приведены инструкции по добавлению подкладок.

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

Чтобы изменить цвет и высоту индикатора (линия под текстом Tab, которая указывает, какая страница просматривается):

• Выберите TabBar в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства индикатора.
• Найдите поле ввода Цвет и нажмите на текст Без установки, введите код цвета и нажмите Использовать выбранный цвет.
• Чтобы увеличить толщину индикатора, введите значение в поле Weight.

Чтобы изменить цвет выбранной вкладки (вкладки, которую просматривает пользователь):

• Выберите панель вкладок в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до пункта Выбранный цвет в разделе Свойства ярлыка.
• Нажмите на текст Unset, введите код цвета и нажмите Use Selected Color. Вы также можете изменить цвет, нажав на Палитру или кнопку Простой.
• Теперь найдите Невыбранный цвет (под Выбранным цветом) и щелкните на тексте Без смещения. Введите код цвета и нажмите кнопку Использовать выбранный цвет.

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

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

• Выберите TabBar в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Общие свойства.
• Введите значение в поле ввода Начальный индекс. Введите значение, равное странице TabBar, которую вы хотите показать.
• Если оставить это значение пустым или ввести 0, будет показана первая вкладка (Flight в примере ниже).
• Если ввести значение 1, будет показана вторая страница (Train в примере ниже).

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

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

• Выберите TabBar в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Общие свойства.
• Установите флажок в поле Прокручиваемая.

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь