0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙OS开发:【一次开发,多端部署】( 设置app页面)

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-21 14:56 次阅读

一多设置典型页面

介绍

本示例展示了设置应用的典型页面,其在小窗口和大窗口有不同的显示效果,体现一次开发、多端部署的能力。

  1. 本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备(或多窗口尺寸)适配,保证应用在不同设备或不同窗口尺寸下可以正常显示。
  2. 本示例使用[Navigation组件],实现小窗口单栏显示、大窗口双栏显示的效果。

效果预览

本示例在不同窗口尺寸下的显示效果。

本示例在开发板上的运行效果。

image.png

使用说明:

  1. 启动应用,查看应用在全屏状态下的显示效果。
  2. 依次点击WLAN -> 更多WLAN设置,查看应用的显示效果。
  3. 依次点击更多连接->NFC,查看应用的显示效果。
  4. 在应用顶部,下滑出现窗口操作按钮。(建议通过外接鼠标操作,接入鼠标只需要将鼠标移动至顶部即可出现窗口)
  5. 点击悬浮图标,将应用悬浮在桌面上显示。
  6. 拖动应用悬浮窗口改变窗口尺寸,触发应用显示刷新。改变窗口尺寸的过程中,窗口尺寸可能超出屏幕尺寸,此时在屏幕中只能看到应用部分区域的显示。可以通过移动窗口位置,查看应用其它区域的显示。
  7. 重复步骤2和3,查看应用在不同窗口尺寸下的显示效果。
  8. 开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

工程目录

features/settingitems/src/main/ets/
|---settingList
|   |---settingList.ets                    // 设置页面
|---moreconnections                                  
|   |---MoreConnectionsItem.ets            // 更多连接模块
|   |---Nfc.ets                            // nfc对象操作类
|---wlan                                    
|   |---WlanMoreSetting.ets                // 更多网络设置模块
|   |---WlanSettingItem.ets                // 网络设置模块
|---components                                    
|   |---ItemDescription.ets                // 每个单元组模块前的标题描述模块
|   |---ItemGroup.ets                      // 单元组模块
|   |---MainItem.ets                       // 主体框架模块
|   |---SearchBox.ets                      // 搜索框模块
|   |---SubItemArrow.ets                   // 下一步模块(箭头跳转组件)
|   |---SubItemToggle.ets                  // 状态按钮组件
|   |---SubItemWifi.ets                    // 子网络列表模块   
|---products/default/src/main/ets/pages/
|   |---Index.ets                          // 英国威廉希尔公司网站
 

`HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

搜狗高速浏览器截图20240326151450.png

具体实现

本示例介绍如何实现不同断点下存在单栏和双栏设计的场景,主要有以下三方面:

实现单/双栏的显示效果

通过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模式之间切换。[源码参考]。

/*

 * Copyright (c) 2022 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import { SettingList } from '@ohos/settingItems'



let storage = LocalStorage.GetShared()



@Entry(storage)

@Component

struct Index {

  @LocalStorageProp('currentBreakpoint') curBp: string = 'sm'

  @LocalStorageProp('windowWidth') windowWidth: number = 300

  @LocalStorageProp('isSplitMode') isSplitMode: boolean = false

  @State itemTitle: string = ''



  aboutToAppear() {

    this.itemTitle = getContext().resourceManager.getStringSync($r('app.string.settings').id)

  }



  build() {

    Navigation() {

      SettingList()

    }

    .title(this.itemTitle)

    .mode(this.isSplitMode ? NavigationMode.Split : NavigationMode.Stack)

    .navBarWidth(0.4 * this.windowWidth)

    .hideToolBar(true)

    .width('100%')

    .height('100%')

    .backgroundColor($r("sys.color.ohos_id_color_sub_background"))

  }

}

实现点击跳转或刷新

Navigation组件通常搭配NavRouter组件以及NavDestination组件一起使用:

  • NavRouter组件用于控制Navigation组件Content区域的显示和刷新逻辑:其必须包含两个孩子节点。
    1、容器类组件-直接控制NavRouter的显示效果。
    2、NavDestination组件:刷新Navigation组件Content区域的显示。
    3、NavRouter组件通过onStateChange回调事件,用于通知开发者NavRouter的状态:用户点击NavRouter,激活NavRouter并加载对应的NavDestination子组件时,回调onStateChange(true);
    4、NavRouter对应的NavDestination子组件不再显示时,回调onStateChange(false)。
  • NavDestination组件用于实际刷新Navigation组件Content区域的显示。
  • 例如:在本示例中wlan功能项为NavRouter的第一个孩子节点,跳转的子页面WLAN为NavRouter的第二个孩子节点,[源码参考]。
/**

 * Copyright (c) 2021-2023 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import { MainItem } from '../components/MainItem'

import { WlanMoreSettingItem } from './WlanMoreSetting'

import { SubItemToggle } from '../components/SubItemToggle'

import { SubItemWifi } from '../components/SubItemWifi'

import { ItemGroup } from '../components/ItemGroup'

import { ItemDescription } from '../components/ItemDescription'



@Component

export struct WlanSettingItem {

  @State itemTitle: string = ''

  @LocalStorageLink('selectedLabel') selectedLabel: string  = ''



  aboutToAppear() {

    this.itemTitle = getContext().resourceManager.getStringSync($r('app.string.wifiTab').id)

  }



  build() {

    Column() {

      NavRouter() {

        MainItem({

          title: $r('app.string.wifiTab'),

          tag: 'UX',

          icon: $r('app.media.wlan'),

          label: 'WLAN'

        })



        NavDestination() {

          WlanSetting()

        }

        .title(this.itemTitle)

        .backgroundColor($r('sys.color.ohos_id_color_sub_background'))

      }.onStateChange((isActivated: boolean) = > {

        if (isActivated) {

          this.selectedLabel = 'WLAN'

        }

      })

    }

  }

}



@Component

struct WlanSetting {

  @Builder CustomDivider() {

    Divider()

      .strokeWidth('1px')

      .color($r('sys.color.ohos_id_color_list_separator'))

      .margin({left: 12, right: 8})

  }



  build() {

    Column() {

      Column() {

        ItemGroup() {

          SubItemToggle({title: $r('app.string.wifiTab'), isOn: true})

        }



        Row().height(16)



        ItemGroup() {

          WlanMoreSettingItem()

        }

      }

      .margin({bottom: 19.5})

      .flexShrink(0)



      Scroll() {

        Column() {

          ItemDescription({description: $r('app.string.wifiTipConnectedWLAN')})

            .padding({

              left: 12,

              right: 12,

              bottom: 9.5

            })



          ItemGroup() {

            SubItemWifi({

              title: 'UX',

              subTitle: $r('app.string.wifiSummaryConnected'),

              isConnected: true,

              icon: $r('app.media.ic_wifi_signal_4_dark')

            })

          }



          Column() {

            ItemDescription({description: $r('app.string.wifiTipValidWLAN')})

              .margin({

                left: 12,

                right: 12,

                top: 19.5,

                bottom: 9.5

              })



            ItemGroup() {

              SubItemWifi({

                title: 'Huwe-yee',

                subTitle: $r('app.string.wifiSummaryEncrypted'),

                isConnected: false,

                icon: $r('app.media.ic_wifi_lock_signal_4_dark')

              })



              this.CustomDivider()



              SubItemWifi({

                title: 'UX-5G',

                subTitle: $r('app.string.wifiSummaryOpen'),

                isConnected: false,

                icon: $r('app.media.ic_wifi_signal_4_dark')

              })



              this.CustomDivider()



              SubItemWifi({

                title: 'E1-AP',

                subTitle: $r('app.string.wifiSummarySaveOpen'),

                isConnected: false,

                icon: $r('app.media.ic_wifi_signal_4_dark')

              })

            }

          }

        }

      }

      .scrollable(ScrollDirection.Vertical)

      .scrollBar(BarState.Off)

      .width('100%')

      .flexShrink(1)

    }

    .width('100%')

    .height('100%')

    .padding({left: 12, right: 12})

  }

}

实现多级跳转

Navigation组件支持自动切换单栏和双栏的显示效果,同时可以根据当前状态自动添加返回键及响应系统的返回键事件。[源码参考]。

/**

 * Copyright (c) 2021-2023 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import { SubItemArrow } from '../components/SubItemArrow'

import { SubItemToggle } from '../components/SubItemToggle'

import { ItemGroup } from '../components/ItemGroup'

import { ItemDescription } from '../components/ItemDescription'



@Component

export struct WlanMoreSettingItem {

  @State itemTitle: string = ''

  @LocalStorageLink('selectedLabel') selectedLabel: string = ''



  aboutToAppear() {

    this.itemTitle = getContext().resourceManager.getStringSync($r('app.string.moreWlanSettings').id)

  }



  build() {

    NavRouter() {

      SubItemArrow({ title: $r('app.string.moreWlanSettings') })



      NavDestination() {

        WlanMoreSetting()

      }

      .title(this.itemTitle)

      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))

    }

    .onStateChange((isActivated: boolean) = > {

      if (isActivated) {

        this.selectedLabel = 'WLAN'

      }

    })

  }

}



@Component

export struct WlanMoreSetting {

  build() {

    Scroll() {

      Column() {

        ItemGroup() {

          SubItemArrow({

            title: $r('app.string.wlanPlus'),

            tag: $r('app.string.enabled')

          })

        }



        ItemDescription({description: $r('app.string.wlanPlusTip')})

          .margin({

            top: 8,

            bottom: 24,

            left: 12,

            right: 12

          })



        ItemGroup() {

          SubItemArrow({ title: $r('app.string.wlanDirect') })

        }



        Blank().height(12)



        ItemGroup() {

          SubItemToggle({title: $r('app.string.wlanSecurityCheck')})

        }



        ItemDescription({description: $r('app.string.wlanSecurityCheckTip')})

          .margin({

            top: 8,

            bottom: 24,

            left: 12,

            right: 12

          })



        ItemGroup() {

          SubItemArrow({title: $r('app.string.savedWlan')})

          Divider()

            .strokeWidth('1px')

            .color($r('sys.color.ohos_id_color_list_separator'))

            .margin({left: 12, right: 8})

          SubItemArrow({title: $r('app.string.installCertificates')})

        }

      }

      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))

      .padding({left: 12, right: 12})

    }

    .scrollBar(BarState.Off)

    .width('100%')

  }

}

1、通过激活SettingList中的WLANSettingItem,可以加载及显示WlanSetting。
2、激活WlanSetting中的WlanMoreSettingItem,可以加载及显示WlanMoreSetting。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2350

    浏览量

    42842
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    188

    浏览量

    4386
收藏 人收藏

    评论

    相关推荐

    HarmonyOS开发案例:【一次开发多端部署(视频应用)】

    者提供了“一次开发多端部署”的系统能力,让开发者可以基于一次
    的头像 发表于 05-11 15:41 1462次阅读
    HarmonyOS<b class='flag-5'>开发</b>案例:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>(视频应用)】

    HarmonyOS开发案例:【一次开发多端部署-音乐专辑】

    基于自适应和响应式布局,实现一次开发多端部署音乐专辑页面
    的头像 发表于 05-13 16:48 684次阅读
    HarmonyOS<b class='flag-5'>开发</b>案例:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>-音乐专辑】

    鸿蒙OS开发:【一次开发多端部署】(天气应用)案例

    本章通过个天气应用,介绍多应用的整体开发过程,包括UX设计、工程管理及调试、页面开发等。
    的头像 发表于 05-15 15:42 1047次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(天气应用)案例

    鸿蒙OS开发:【一次开发多端部署】应用(资源使用)

    页面开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。
    的头像 发表于 05-21 15:43 1016次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】应用(资源使用)

    鸿蒙OS开发:【一次开发多端部署】(多天气)项目

    本示例展示个天气应用界面,包括英国威廉希尔公司网站 、城市管理、添加城市、更新时间弹窗,体现一次开发多端部署的能力。
    的头像 发表于 05-20 14:59 843次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(<b class='flag-5'>一</b>多天气)项目

    鸿蒙OS开发:【一次开发多端部署】(音乐专辑主页)

    本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备(或多窗口尺寸)适配,保证应用在不同设备或不同窗口尺寸下可以正常显示。
    的头像 发表于 05-21 14:48 744次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(音乐专辑主页)

    鸿蒙OS开发:【一次开发多端部署】(音乐专辑页面

    基于自适应和响应式布局,实现一次开发多端部署音乐专辑页面
    的头像 发表于 05-25 16:21 802次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(音乐专辑<b class='flag-5'>页面</b>)

    鸿蒙OS开发:【一次开发多端部署】(视频应用)

    者提供了“一次开发多端部署”的系统能力,让开发者可以基于一次
    的头像 发表于 05-25 16:29 4536次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(视频应用)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】实战(音乐专辑页2)

    本示例使用[一次开发多端部署]中介绍的自适应布局能力和响应式布局能力进行多设备(或多窗口尺寸)适配,保证应用在不同设备或不同窗口尺寸下可以正常显示。
    的头像 发表于 05-25 16:47 2105次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:典型<b class='flag-5'>页面</b>场景【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】实战(音乐专辑页2)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】(设置应用页面

    本小节以“设置”应用页面为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
    的头像 发表于 05-27 10:33 1193次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:典型<b class='flag-5'>页面</b>场景【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(<b class='flag-5'>设置</b>应用<b class='flag-5'>页面</b>)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】实战(设置典型页面

    本示例展示了设置应用的典型页面,其在小窗口和大窗口有不同的显示效果,体现一次开发多端部署的能力
    的头像 发表于 05-27 09:36 1144次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:典型<b class='flag-5'>页面</b>场景【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】实战(<b class='flag-5'>设置</b>典型<b class='flag-5'>页面</b>)

    华为开发者大会2021:一次开发 多端部署

    一次开发 多端部署使能开发者从单设备生态跨入多设备生态!
    的头像 发表于 10-22 15:09 1642次阅读
    华为<b class='flag-5'>开发</b>者大会2021:<b class='flag-5'>一次</b><b class='flag-5'>开发</b> <b class='flag-5'>多端</b><b class='flag-5'>部署</b>

    华为开发者大会2021:软件部总裁龚体 鸿蒙系统 一次开发 多端部署 万物互连

    华为开发者大会2021:鸿蒙系统 一次开发 多端部署 万物互连 在华为
    的头像 发表于 10-22 15:09 4553次阅读
    华为<b class='flag-5'>开发</b>者大会2021:软件部总裁龚体 <b class='flag-5'>鸿蒙</b>系统 <b class='flag-5'>一次</b><b class='flag-5'>开发</b> <b class='flag-5'>多端</b><b class='flag-5'>部署</b> 万物互连

    鸿蒙OS开发:【一次开发多端部署】(多设备自适应能力)简单介绍

    本示例是《一次开发多端部署》的配套示例代码,展示了[页面开发
    的头像 发表于 05-21 14:59 2426次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(多设备自适应能力)简单介绍

    鸿蒙OS开发:典型页面场景【一次开发多端部署】(功能开发

    应用开发至少包含两部分工作: UI页面开发和底层功能开发(部分需要联网的应用还会涉及服务端开发)。前面章节介绍了如何解决
    的头像 发表于 05-28 17:32 581次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:典型<b class='flag-5'>页面</b>场景【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(功能<b class='flag-5'>开发</b>)