Этот пример демонстрирует типичную страницу для настройки приложения. Страница имеет разные визуальные эффекты в малом и большом окнах, отражая возможность однократного разработки для многоплатформенного развертывания.
Ниже показаны визуальные эффекты этого примера в разных размерах окон.
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 // Дополнительные сетевые настройки
│ └──WlanSettingItem. ets // Модуль сетевых настроек
└──entry/src/main/resources // Ресурсы приложения
```### Как реализовать
Этот пример описывает, как реализовать сценарии односпискового и двухспискового дизайна при различных разбиениях.
#### Односписковый/двухсписковый отображение
Компонент **Navigation** используется для реализации односпискового или двухспискового отображения. Он состоит из двух областей: **Navbar** (главная страница) и **Content** (вспомогательная страница).Компонент **Navigation** поддерживает режимы **Stack**, **Split** и **Auto**.
1. Режим Stack: Навигационная панель и область содержимого отображаются независимо, что эквивалентно нескольким страницам. Эффект отображения: Страница переходит к **Content1** (страница WLAN) с главной страницы **Navbar** и затем к Content2 (более сложные режимы WLAN).
2. Режим Split: Навигационная панель и содержимое отображаются в двух колонках. Эффект отображения: Navbar+Content1.
3. Режим Auto: Компонент **Navigation** может автоматически выбирать подходящий режим в зависимости от размера окна приложения. Если ширина окна меньше 520 vp, применяется режим **Stack**. Если ширина окна больше или равна 520 vp, применяется режим **Split**. При изменении размера окна компонент **Navigation** автоматически переключается между режимами Stack и Split. Подробнее о исходном коде см. [Источник кода](products/default/src/main/ets/pages/Index. ets). #### Перенаправление или перерender при нажатии
Компонент **Navigation** обычно используется вместе с компонентами **NavRouter** и **NavDestination**.
* Компонент **NavRouter** управляет отображением содержимого страниц и перерender-ом компонента **Navigation**. Он включает два дочерних узла.
1. Контейнерный компонент: непосредственно управляет эффектом отображения **NavRouter**.
2. Компонент **NavDestination**: перерender-ит область содержимого компонента **Navigation**.
3. Компонент **NavRouter** уведомляет о статусе **NavRouter** через событие обратного вызова **onStateChange**.Когда пользователь нажимает **NavRouter**, активирует его и загружает его дочерний компонент, вызывается **onStateChange(true)**.
4. **onStateChange(false)** вызывается, когда дочерний компонент **NavDestination** не отображается.
* Компонент **NavDestination** используется для перерender-а области **Content** компонента **Navigation**.
* В этом примере элемент функции WLAN является первым дочерним узлом **NavRouter**, а перенаправленная подстраница WLAN — его вторым дочерним узлом. Подробнее о исходном коде см. [Ссылка на исходный код](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**. ### Требуемые разрешения### Зависимости
N/A
### Ограничения
1. Пример приложения поддерживается только на телефонах Huawei, работающих с стандартной операционной системой.
2. Версия HarmonyOS должна быть 5.0.0 Release или выше.
3. Версия DevEco Studio должна быть 5.0.0 Release или выше.
4. Версия HarmonyOS SDK должна быть 5.0.0 Release или выше.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )