Левое меню навигации

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

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

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

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

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

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

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

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

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

Чтобы открыть/закрыть ящик в редакторе:

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

Вот инструкции по открытию ящика из AppBar.

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

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

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

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

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

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

• Выберите ящик в дереве виджетов или в области холста.
• Перейдите в Редактор свойств и найдите раздел Свойства рисунка.
• Найдите параметр Elevationmore enormous

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