Правое меню навигации

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

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

Вот пример того, как вы можете использовать виджет EndDrawer в своем проекте:

• Сначала перетащите виджет EndDrawer с вкладки Элементы страницы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Добавьте виджет Column с вкладки Layout Elements внутрь EndDrawer.
• Теперь добавьте один виджет Image внутри колонки и установите его свойство Width в inf (щелкните на значке), а свойство Height в 200.
• Перетащите виджет ListTile с вкладки Base Elements и поместите его внутрь колонки (ниже виджета Image).
• Сохраните свойство ListTile выбранным и перейдите в Property Editor, прокрутите вниз до раздела Title, а затем измените свойство Text на Page 1.
• Прокрутите ниже и найдите раздел Subtitle. Внутри свойства Text удалите текст ‘Lorem ipsum dolor…’.

На данный момент в колонку добавлен один элемент (внутри EndDrawer). Чтобы заполнить колонку большим количеством элементов, просто скопируйте виджет ListTile и измените свойство Text на Page 2, Page 3 и так далее.

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

• Выберите виджет ListTile.
• Щелкните на нем правой кнопкой мыши и выберите Копировать. Также можно использовать сочетание клавиш Ctrl+C или Command+C.
• Выберите виджет Column.
• Щелкните на нем правой кнопкой мыши и выберите Вставить. Вы также можете использовать сочетание клавиш Ctrl+V или Command+V.

После добавления нескольких ListTile запуск приложения выглядит следующим образом:

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

Чтобы открыть/закрыть EndDrawer в редакторе:

• Выберите имя страницы в дереве виджетов (не конечный ящик).
• Перейдите в редактор свойств (в правой части экрана) и найдите кнопку Hide End Drawer.
• Нажмите на кнопку Hide End Drawer, чтобы скрыть EndDrawer.
• Нажмите на кнопку Edit End Drawer, чтобы вернуть EndDrawer в редактор.

Здесь приведены инструкции по открытию EndDrawer из панели AppBar.

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

Изменение ширины конечного ящика позволяет контролировать, какую площадь экрана должен занимать конечный ящик при его открытии.

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

• Выберите EndDrawer в дереве виджетов или в области холста.
• Перейдите в Редактор свойств и найдите раздел Свойства рисования.
• Введите значение в свойство Ширина.

Чтобы изменить высоту (глубину или ось Z) торцевого ящика:

• Выберите EndDrawer в дереве виджетов или в области холста.
• Перейдите в Редактор свойств и найдите раздел Свойства рисования.
• Найдите свойство Elevation и введите значение, чтобы увидеть эффект падающей тени под EndDrawer. Большее значение создает большую тень.

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