OpenHarmony实战开发-如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。

最新推荐文章于 2024-06-15 23:01:31 发布
最新推荐文章于 2024-06-15 23:01:31 发布
阅读量1k 收藏 10
点赞数 28
分类专栏： HarmonyOS 鸿蒙工程师 鸿蒙 文章标签： harmonyos 鸿蒙应用开发 鸿蒙系统 鸿蒙开发 HarmonyOS 鸿蒙 鸿蒙工程师
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82546228/article/details/139049304
版权
鸿蒙工程师 同时被 3 个专栏收录
567 篇文章 4 订阅
订阅专栏
鸿蒙
567 篇文章 1 订阅
订阅专栏
HarmonyOS
555 篇文章 0 订阅
订阅专栏

本小节以“设置”应用页面为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。

页面设计

为充分利用屏幕尺寸优势，应用常常有在小屏设备上单栏显示，大屏设备上左右分两栏显示的设计，设置应用页面设计如下。

在这里插入图片描述

观察“设置”应用页面设计，不同断点下“设置主页”、“WLAN页面”和“更多WLAN设置页面”几乎完全一致，只是在sm断点下采用单栏显示，在md和lg断点下采用双栏显示。

在前面的典型页面场景中，已经介绍了如何分析及实现不同断点下设计相似的单个页面，本小节将展开介绍如何实现不同断点下存在单栏和双栏设计的场景。

为了方便读者理解，本小节将围绕以下三个问题进行介绍。

  1. 如何实现单/双栏的显示效果
  2. 如何实现点击跳转或刷新
  3. 如何实现多级跳转

如何实现单/双栏的显示效果

开发者可以使用Row、Column、RowSplit等基础的组件，实现分栏显示的效果，但是需要较多的开发工作量。方舟开发框架在API 9重构了Navigation组件，开发者可以通过配置Navigation组件的属性，控制其按照单栏或双栏的效果进行显示。

Navigation组件由Navbar和Content两部分区域组成，Navigation组件支持Stack、Split以及Auto三种模式。Stack及Split模式下Navigation组件的表现如下图所示。

  • Stack模式
    在这里插入图片描述
  • Split模式
    在这里插入图片描述
  • Auto模式

Auto模式是指Navigation组件可以根据应用窗口尺寸，自动选择合适的模式：窗口宽度小于520vp时，采用Stack模式显示；窗口宽度大于等于520vp时，采用Split模式显示。当窗口尺寸发生改变时，Navigation组件也会自动在Stack模式和Split模式之间切换。

说明：

Navigation组件提供的title、navBarWidth、navBarPosition等属性来调整其显示效果。Navigation组件样式的配置与其它组件类似，这里不做赘述。
首次加载Navigation组件所在的页面时，如果Navigation组件处于Split模式，Navigation组件会自动激活其第一个NavRouter孩子节点（后文会展开介绍NavRouter）来刷新Content区域的显示。
设置主页的核心代码如下所示。Navigation组件默认处于Auto模式，其样式会根据应用窗口尺寸在单栏和双栏之间自动切换。

import { SettingList } from '@ohos/settingItems';

@Entry
@Component
struct Index { 
  build() {
    Navigation() {
      SettingList()
    }
    .title($r('app.string.settings'))
    .navBarWidth('40%')
    .width('100%')
    .height('100%')
    .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
  }
}

//核心代码 SettingList.ets
import { MainItem } from '../components/MainItem';
import { ItemGroup } from '../components/ItemGroup';
import { SearchBox } from '../components/SearchBox';
import { MoreConnectionsItem } from '../moreconnections/MoreConnectionsItem';
import { WlanSettingItem } from '../wlan/WlanSettingItem';
        
class  ItemObj {
  title?: Resource
  tag?: Resource
  icon?:Resource
}
let bluetoothTab:ItemObj={
  title: $r('app.string.bluetoothTab'),
  tag: $r('app.string.enabled'),
  icon: $r('app.media.blueTooth'),
}
let mobileData:ItemObj={
  title: $r('app.string.mobileData'),
  icon: $r('app.media.mobileData'),
}
let brightnessTab:ItemObj={
  title: $r('app.string.brightnessTab'),
  icon: $r('app.media.displayAndBrightness'),
}
let volumeControlTab:ItemObj={
  title: $r('app.string.volumeControlTab'),
  icon: $r('app.media.volume'),
}
let biometricsAndPassword:ItemObj={
  title: $r('app.string.biometricsAndPassword'),
  icon: $r('app.media.biometricsAndPassword'),
}
let applyTab:ItemObj={
  title: $r('app.string.applyTab'),
  icon: $r('app.media.application'),
}
let storageTab:ItemObj={
  title: $r('app.string.storageTab'),
  icon: $r('app.media.storage'),
}
let security:ItemObj={
  title: $r('app.string.security'),
  icon: $r('app.media.security'),
}
let privacy:ItemObj={
  title: $r('app.string.privacy'),
  icon: $r('app.media.privacy'),
}
let usersAccountsTab:ItemObj={
  title: $r('app.string.usersAccountsTab'),
  icon: $r('app.media.userAccounts'),
}
let systemTab:ItemObj={
  title: $r('app.string.systemTab'),
  icon: $r('app.media.system'),
}
let aboutTab:ItemObj={
  title: $r('app.string.aboutTab'),
  icon: $r('app.media.aboutDevice'),
}
        
@Component
export struct SettingList {
  @Builder
  CustomDivider() {
    Divider()
      .strokeWidth('1px')
      .color($r('sys.color.ohos_id_color_list_separator'))
      .margin({ left: 48, right: 8 })
  }

   build() {
     List({ space: 12 }) {
       ListItem() {
        SearchBox()
       }
       .padding({ top: 8, bottom: 8 })
       .width('100%')

      ListItem() {
        ItemGroup() {
          WlanSettingItem()

          this.CustomDivider()

          MainItem(bluetoothTab)

          this.CustomDivider()

          MainItem(mobileData)

          this.CustomDivider()
          MoreConnectionsItem()
        }
      }

      ListItem() {
        ItemGroup() {
          MainItem(brightnessTab)
        }
      }

      ListItem() {
        ItemGroup() {
          MainItem(volumeControlTab)
        }
      }

      ListItem() {
        ItemGroup() {
          MainItem(biometricsAndPassword)

          this.CustomDivider()

          MainItem(applyTab)

          this.CustomDivider()

          MainItem(storageTab)

          this.CustomDivider()

          MainItem(security)

          this.CustomDivider()

          MainItem(privacy)
        }
      }

      ListItem() {
        ItemGroup() {
          MainItem(usersAccountsTab)

          this.CustomDivider()

          MainItem(systemTab)

          this.CustomDivider()

          MainItem(aboutTab)
        }
      }

    }
    .padding({ left: 12, right: 12 })
    .width('100%')
    .height('100%')
    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
   }
}

如何实现点击跳转或刷新

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

  • NavRouter组件用于控制Navigation组件Content区域的显示和刷新逻辑。
  • NavDestination组件用于实际刷新Navigation组件Content区域的显示。

刷新控制
NavRouter组件用于控制Navigation组件中Content区域的刷新逻辑，其必须包含两个孩子节点。
在这里插入图片描述

NavRouter组件默认提供了点击响应处理，不需要开发者自定义点击事件逻辑。另外，NavRouter组件还提供了onStateChange回调事件，用于通知开发者NavRouter的状态：用户点击NavRouter，激活NavRouter并加载对应的NavDestination子组件时，回调onStateChange(true)；NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。

img

结合设置应用的具体场景来看，上图1号小红框是NavRouter的第一个孩子节点，2号红框是NavRouter的第二个孩子节点，相应的核心代码实现如下。

import { MainItem } from '../components/MainItem';
import { WlanMoreSettingItem } from '../components/WlanMoreSettingItem';
import { SubItemToggle } from '../components/SubItemToggle';
import { SubItemWifi } from '../components/SubItemWifi';
import { ItemDescription } from '../components/ItemDescription';
import { ItemGroup } from '../components/ItemGroup';

class  MainItemObj {
  title?: Resource
  tag?: string
  icon?:Resource
  label?: string
}
let mainItem:MainItemObj={
  title: $r('app.string.wifiTab'),
  tag: 'UX',
  icon: $r('app.media.wlan'),
  label: 'WLAN'
}
@Component
export struct WlanSettingItem {
  @LocalStorageLink('selectedLabel') selectedLabel: string  = ''

  build() {
    Column() {
      NavRouter() {
        MainItem(mainItem)

        NavDestination() {
          WlanSetting()
        }
        .title($r('app.string.wifiTab'))
        .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
      }
    }
  }
}
@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})
  }
}

显示刷新
NavDestination组件用于实际刷新Navigation组件Content区域的显示。激活后的NavRouter对应的NavDestination组件，会占满整个Content区域并刷新其显示。

开发者可以通过NavDestination组件提供的如下属性，调整其最终显示效果：

  • backgroundColor：设置NavDestination组件的背景色。
  • title：自定义NavDestination组件的标题。
  • hideTitleBar：隐藏NavDestination组件的标题栏。

特别的，Navigation组件会根据当前的状态决定是否在NavDestination组件标题栏起始部分自动添加返回键图标。当Navigation组件添加了返回键图标时，还可以自动响应及处理系统三键导航中的返回键事件。

在这里插入图片描述

如何实现多级跳转
可以在NavDesination组件中，继续使用NavRouter组件，以实现多级跳转。多级跳转场景下，Navigation组件同样会根据当前的状态决定是否自动添加返回键图标及响应系统三键导航中的返回键事件。

一级页面 二级页面

结合具体场景，红框3是一个NavRouter组件，点击后可以控制Navigation组件中的Content区域刷新为红框4对应的NavDestination组件吗，其核心代码实现如下所示。

import { SubItemArrow } from '../components/SubItemArrow';//组件请参考相关示例
import { SubItemToggle } from '../components/SubItemToggle';
import { ItemGroup } from '../components/ItemGroup';
import { ItemDescription } from '../components/ItemDescription';

class SubItemArrowObj{
  title?: Resource
}
let subItemArrow:SubItemArrowObj={
  title: $r('app.string.moreWlanSettings')
}
@Component
export struct WlanMoreSettingItem {
  @LocalStorageLink('selectedLabel') selectedLabel: string = ''

  build() {
    NavRouter() {
      SubItemArrow(subItemArrow)

      NavDestination() {
        WlanMoreSetting()
      }
      .title($r('app.string.moreWlanSettings'))
      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
    }
  }
}

@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%')
  }
}

总结

在这里插入图片描述

本示例的基础导航结构上图所示：

  • 激活SettingList中的WLANSettingItem，可以加载及显示WlanSetting。
  • 激活WlanSetting中的WlanMoreSettingItem，可以加载及显示WlanMoreSetting。

Navigation组件支持自动切换单栏和双栏的显示效果，同时可以根据当前状态自动添加返回键及响应系统的返回键事件。借助Navigation组件，开发者不用关心单栏和双栏场景的差异而更关注于应用本身，极大的减少开发工作量及提高开发效率。

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、相关教学视频》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

码牛程序猿
关注
  • 28
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web响应式布局中iframe自适应的方法
09-28
响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面...这篇问题给大家介绍了在web响应式布局中让iframe自适应的方法，有需要的朋友可以参考借鉴，下面来一起看看吧。
网站模板源码-（自适应手机版）响应式工商公会网站源码
07-12
网站模板源码-（自适应手机版）响应式工商公会网站源码。资源中包含了详细的系统图文搭建教程。源码都是实际项目，经过测试可以正常稳定运行在服务器，需要具备基础服务器搭建知识，不会搭建的请谨慎购买。
鸿蒙一次开发，多端部署（十一）设置应用页面
1
03-22 1115
激活中的，可以加载及显示。激活中的，可以加载及显示。Navigation组件支持自动切换单栏和双栏的显示效果，同时可以根据当前状态自动添加返回键及响应系统的返回键事件。借助Navigation组件，开发者不用关心单栏和双栏场景的差异而更关注于应用本身，极大的减少开发工作量及提高开发效率。基本概念构建第一个ArkTS应用……应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言……Ability开发。
2024年HarmonyOS鸿蒙最新鸿蒙（HarmonyOS）Navigation如何实现多场景UI适配？(2)，微信小程序如何跳转页面
2401_84852027的博客
05-09 334
/ Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。build() {Column() {// 导航组件，默认提供点击响应处理// 导航区内容// NavRouter组件的子组件，用于显示导航内容区。// 内容区Row() {.width(40)
OpenHarmony实战开发-如何使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。
m0_70749039的博客
04-17 389
本示例介绍使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。该场景多用于沉浸式场景下。
详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第六节（js版） ——模块化设计实现复杂页面
爱蹦跶的全栈大A阿
12-18 1513
模块化设计是开发复杂页面的关键。本文通过一个实例,介绍了如何利用鸿蒙的import/include以及观察者模式实现模块化拆分,并处理好组件间的数据交互问题。模块化开发能大幅提高代码质量,如果你在鸿蒙应用开发过程中也遇到类似复杂页面的困扰,不妨借鉴本文的解决方案。欢迎大家在评论区分享你的模块化设计经验!
鸿蒙应用开发培训笔记04：UI页面设计与开发
howard2005的专栏
01-18 2175
文章目录零、本讲学习目标一、Java UI开发（一）Java UI概述1、用户界面是如何构建的？2、组件树（1）Component：组件（2）ComponentContainer：布局容器（3）LayoutConfig - 布局配置3、使用 XML 创建布局4、使用 Java 创建布局（二）常用布局（三）常用组件二、JS UI开发三、UI设计 零、本讲学习目标 掌握Java UI的总体架构及常用布局组件的使用 了解JS UI的总体架构及基本使用方法； 了解进行用户界面设计的注意事项。 一、Java UI
页面学习——鸿蒙登录页面设计
cmmboy1990的博客
07-26 3164
页面学习——鸿蒙登录页面设计 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="vertical_center" ohos:backgrou
自适应屏幕的CSS响应式布局设计技巧总结
09-24
主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
鸿蒙OS开发：【一次开发，多端部署】（app市场首页）项目
m0_70748845的博客
05-20 1223
本示例展示了应用市场首页，页面中包括Tab栏、运营横幅、精品应用、精品游戏等。本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配，保证应用在不同设备或不同窗口尺寸下可以正常显示。用到了媒体查询接口[@ohos.mediaquery]
鸿蒙（HarmonyOS）Navigation如何实现多场景UI适配？
maniuT的博客
03-26 1094
在窄屏设备上，联系人和聊天区在多窗口中体现。在宽屏设备上，联系人和聊天区在同一窗口体现。要做好适配，往往需要开发者开发多套代码，以便运行在不同设备上。但是这样耗时耗力，于是ArkUI针对这种场景提供了分栏组件，可以通过一套代码完成不同设别的适配，本例简单介绍下如何使用分栏组件实现上述场景。
鸿蒙一次开发，多端部署（七）响应式布局
1
03-21 973
栅格是多设备场景下通用的辅助定位工具，通过将空间分割为有规律的栅格。栅格可以显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。栅格的样式由Margin、Gutter、Columns三个属性决定。Margin是相对应用窗口、父容器的左右边缘的距离，决定了内容可展示的整体宽度。Gutter是相邻的两个Column之间的距离，决定内容间的紧密程度。Columns是栅格中的列数，其数值决定了内容的布局复杂度。
鸿蒙（HarmonyOS）支持低代码开发，无需HTML知识，就可以设计复杂界面
m0_54853503的博客
03-02 500
鸿蒙的最新IDE支持可视化开发。几乎不需要编写一行代码，就可以设计非常复杂的界面。当然，如果要实现业务逻辑，还是需要编写代码的。所以我们把这些功能称为低代码开发，也就是说，可以让我们少编写一些代码。 本文将详细介绍如何使用鸿蒙最新的IDE来设计一个复杂的界面。首先启动IDE，并创建一个JS工程。 由于可视化开发目前只支持JS，所以我们只能用JS工程。 创建完工程后，找到js中的pages配置，然后在右键菜单中点击New -> JS Visual菜单项，如下图所示。 这时会弹出一个对话框，如下图所示
鸿蒙OS屏幕适配UI设计图解决方案
BLUESKYHOST的博客
03-04 1854
先上图 这仨赏金猎人App解决方案 赏金猎人开发日志地址https://harmonyos.51cto.com/posts/3203，我想问问谁有办法替换系统默认的尺寸计算方案求大佬告知 这个是实现渲染 这个是UI设计图 使用方法 RpxUtil.rpx(23,this.context) 直接按照UI尺寸调用即可 源码 package com.example.shangjinlieren.utils; import ohos.agp.window.service.Display
单页面和多页面应用场景总结
u012475786的专栏
05-10 4156
单页面和多页面应用场景总结 一、什么是单页面应用？ 基本概念：在项目应用中，以单个html页面作为外壳页面，并在外壳页面一次性加载项目所依赖的资源（CSS、JS）。项目中其他页面作为页面片段在外壳页面中进行无感切换（例如：利用H5的History监听到URL的变化，对页面片段进行切换（删除和添加））。 单页面应用结构图： 优点：项目依赖资源共用，页面片段切换流畅（无感）、页面片段可以进行复用，页...
前端开发：单页面和多页面使用场景
09-06 1096
一、单页面应用 只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站。 二、多页面应用（MultiPage Application，MPA） 多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等。 ...
鸿蒙Arkts上传图片并获取接口返回信息
sunshine641的博客
06-14 255
2.1、接口不通，提示ERR_BAD_OPTION_VALUE。1、鸿蒙自带的文件上传返回值只会返回上传状态，不会返回接口返回信息。选择相册图片后，将文件上传到服务器，接口会返回图片地址。2.2、接口通了，报错500。2、用axios上传。
鸿蒙轻内核M核源码分析系列二一 03 文件系统LittleFS
最新发布
maniuT的博客
06-15 457
函数LfsAllocFd()设置文件信息数组元素信息。参数fileName为文件路径信息，传出参数fd为文件描述符即数组索引。遍历文件信息数组，遍历到第一个未使用的元素标记其为已使用状态，设置文件路径信息，把数组索引赋值给文件描述符fd，返回文件信息元素指针地址。如果遍历失败，返回NULL。函数LfsFreeFd()为函数LfsAllocFd()的反向操作，根据文件描述符设置对应的数组元素为未使用状态，并把路径信息等设置为NULL。
自适应布局 和响应式布局
08-30
自适应布局和响应式布局是两种常用的网页布局技术。 自适应布局是指通过设置网页元素的尺寸相对于浏览器窗口或父容器的百分比来实现布局的适应性。这意味着网页会根据浏览器窗口或父容器的大小进行调整，以适应不同的屏幕尺寸或设备。通常，自适应布局使用媒体查询技术来定义不同屏幕宽度下的样式，以实现不同的布局。 响应式布局是指通过使用CSS媒体查询和弹性网格等技术，在不同屏幕尺寸下自动调整和重新排列网页元素，以提供更好的用户体验。响应式布局可以根据设备的屏幕大小和方向，自动调整网页元素的大小、位置和显示方式。它可以为不同屏幕尺寸提供不同的布局，并确保网页在各种设备上都能正常显示。 总结起来，自适应布局主要通过百分比设置元素尺寸，而响应式布局则通过媒体查询和弹性网格等技术来实现自动调整和重新排列网页元素。两者都旨在提供更好的用户体验，并确保网页在不同设备和屏幕尺寸下都能良好地展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值