Слияние кода завершено, страница обновится автоматически
В этом примере показана типичная страница настройки приложения, которая отображается по-разному на устройствах с разными размерами экрана, демонстрируя возможность однократной разработки и многоканальной развертки.
Отображение примера на различных размерах окна.
Инструкции по использованию:
WLAN -> Дополнительные настройки WLAN, чтобы посмотреть, как оно отображается.Дополнительные соединения -> NFC, чтобы посмотреть, как оно отображается.### Структура проекта├──features/settingitems/src/main/ets // Код
│ ├──components
│ │ ├──ItemDescription. ets // Описание каждого модуля группы элементов
│ │ ├──ItemGroup. ets // Модуль группы элементов
│ │ ├──MainItem. ets // Модуль основной структуры
│ │ ├──SearchBox. ets // Модуль поисковой строки
│ │ ├──SubItemArrow. ets // Модуль перехода (стрелка)
│ │ ├──SubItemToggle. ets // Модуль переключателя состояния
│ │ └──SubItemWifi. ets // Модуль списка подсетей
│ ├──moreconnections
│ │ ├──MoreConnectionsItem. ets // Модуль дополнительных соединений
│ │ └──Nfc. ets // Класс для работы с объектом NFC
│ ├──settinglist
│ │ └──SettingList. ets // Модуль страницы настроек
│ └──wlan
│ ├──WlanMoreSetting. ets // Модуль дополнительных настроек WLAN
│ └──WlanSettingItem. ets // Модуль настроек WLAN
└──entry/src/main/resources // Директория ресурсов приложения
```### Конкретная реализация
В этом примере описывается, как реализовать сценарии с одноколонной и двухколонной разметкой при различных разрешениях экрана. Основные аспекты реализации включают:
#### Реализация отображения одноколонной и двухколонной разметкиОтображение одноколонной и двухколонной разметки реализуется с помощью компонента Navigation, который состоит из двух областей: Navbar (основная страница) и Content (подстраница). Компонент Navigation поддерживает три режима: Stack, Split и Auto.
1. Режим Stack: навигационная панель и область содержимого отображаются независимо, как несколько страниц. Отображение: переход с Navbar (основная страница) на Content1 (страница WLAN) и далее на Content2 (дополнительные режимы WLAN).
2. Режим Split: навигационная панель и область содержимого отображаются в двух колонках. Отображение: Navbar + Content1.
3. Режим Auto: компонент Navigation автоматически выбирает подходящий режим в зависимости от размера окна. При ширине окна менее 520vp используется режим Stack, при ширине окна 520vp и более — режим Split. При изменении размера окна компонент Navigation автоматически переключается между режимами Stack и Split. [Исходный код](products/default/src/main/ets/pages/Index.ets).#### Реализация перехода по клику или обновления
Компонент Navigation обычно используется вместе с компонентами NavRouter и NavDestination:
* Компонент NavRouter используется для управления отображением и обновлением области Content компонента Navigation. Он должен содержать два дочерних узла.
1. Контейнерный компонент — непосредственно управляет отображением NavRouter.
2. Компонент NavDestination — обновляет отображение области Content компонента Navigation.
3. Компонент NavRouter использует событие обратного вызова onStateChange для уведомления разработчика о состоянии NavRouter: при активации NavRouter и загрузке соответствующего дочернего компонента NavDestination событие onStateChange(true) вызывается; при отключении соответствующего дочернего компонента NavDestination событие onStateChange(false) вызывается.
* Компонент NavDestination используется для фактического обновления отображения области Content компонента Navigation.
* Например, в этом примере функция WLAN является первым дочерним узлом NavRouter, а подстраница WLAN — вторым дочерним узлом NavRouter. [Исходный код](features/settingitems/src/main/ets/wlan/WlanSettingItem.ets).#### Реализация многоуровневого перехода
Компонент Navigation поддерживает автоматическое переключение между одноколонной и двухколонной разметкой, а также автоматическое добавление кнопки возврата и обработку событий кнопки возврата системы. [Исходный код](features/settingitems/src/main/ets/wlan/WlanMoreSetting.ets).
1. Активация элемента WlanSettingItem в списке SettingList позволяет загрузить и отобразить WlanSetting.
2. Активация элемента WlanMoreSettingItem в WlanSetting позволяет загрузить и отобразить WlanMoreSetting.
### Релевантные права### Зависимости
Нет.
### Ограничения и условия
1. Этот пример поддерживает только стандартные системы, поддерживаемые устройства: телефоны Huawei.
2. Система HarmonyOS: HarmonyOS 5.0.0 и выше.
3. Версия DevEco Studio: DevEco Studio 5.0.0 и выше.
4. Версия SDK HarmonyOS: HarmonyOS 5.0.0 SDK и выше.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )