鸿蒙UI开发

news2025/4/5 8:34:11

鸿蒙UI开发

本文旨在分享一些鸿蒙UI布局开发上的一些建议,特别是对屏幕宽高比发生变化时的应对思路和好的实践。

折叠屏适配

一般情况(自适应布局/响应式布局

1.自适应布局

1.1自适应拉伸

左右组件定宽

TypeScript
//左右定宽
Row() {
  Text("健康使用手机")
    .fontSize(16)
    .width(135)
  Blank()
  Toggle({ type: ToggleType.Switch })
    .width(36)
}
.borderRadius(12)
.padding({ left: 13, right: 13 })
.backgroundColor('#FFFFFF')
.width('100%')

左右组件不定宽(左组件占剩余宽度,右组件不定宽)

TypeScript
//layoutWeight
//左右不定宽,
  Row() {
    ...
    Text("我的宽度占剩余的宽度"+"111111111111")
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
    ...
  }
  .layoutWeight(1)

  Text("我的宽度不固定")
    .textAlign(TextAlign.End)
    //这个margin自我调整,一般为做组件所有icon的宽度和
    .margin({ left: 54 })
}
.width('100%')

1.2均分拉伸

灵活使用弹性布局Flex

TypeScript
//不换行
Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
  ForEach(this.list, () => {
    this.Item()
  })
}

//换行
Flex({ justifyContent: FlexAlign.Center ,wrap:FlexWrap.Wrap}) {
  ForEach(this.list, () => {
    this.Item()
  })
}

1.3自适应延伸

TypeScript
Scroll() {
  Row({ space: 10 }) {
    ForEach(this.appList, () => {
      Column() {
        Image($r('app.media.icon'))
          .width(48)
          .height(48)
        Text($r('app.string.show_app_name'))
          .fontSize(12)
          .textAlign(TextAlign.Center)
      }.width(80).height(102)
    })
  }
}
.scrollable(ScrollDirection.Horizontal)
.width("100%")

2.响应式布局

2.1媒体查询

TypeScript
//核心代码
private breakpoints: BreakpointEntity[] = [
  { name: 'xs', size: 0 }, { name: 'sm', size: 320 },
  { name: 'md', size: 600 }, { name: 'lg', size: 840 }
]

/**
 *
更新当前断点
 * 当传入的断点与当前断点不同时,更新当前断点并持久化
 */
private updateCurrentBreakpoint(breakpoint: string) {
  if (this.currentBreakpoint !== breakpoint) {
    this.currentBreakpoint = breakpoint;
    AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint);
    console.log('on current breakpoint: ' + this.currentBreakpoint);
  }
}

/**
 *
注册断点监听器
 * 为每个断点创建媒体查询监听器,当屏幕尺寸匹配时,更新当前断点
 */
public register() {
  this.breakpoints.forEach((breakpoint: BreakpointEntity, index) => {
    let condition :string = '';
    //
监听句柄,反应视窗宽度和breakpoint.size的关系
    if (index === this.breakpoints.length - 1) {
      condition = '(' + breakpoint.size + 'vp<=width' + ')';
    } else {
      condition = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)';
    }
    console.log(condition);
    // breakpoint.size vp <= width
的条件改变时触发回调,传递此时视窗大小
    breakpoint.mediaQueryListener = mediaQuery.matchMediaSync(condition);
    breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
      if (mediaQueryResult.matches) {
        this.updateCurrentBreakpoint(breakpoint.name);
      }
    })
  })
}

3.典型布局场景

3.1挪移布局

 

栅格布局GridRow

TypeScript
GridRow() {
  GridCol({ span: { sm: 12, md: 6, lg: 6 } }) {
    Text("图片内容")
  }
  .width("100%")
  .height("50%")
  .backgroundColor(Color.Red)
  GridCol({ span: { sm: 12, md: 6, lg: 6 } }) {
      Text("文字标题")
  }
  .width("100%")
  .height("50%")
  .backgroundColor(Color.Blue)
}

3.2重复布局

栅格布局GridRow

TypeScript
Scroll() {
  GridRow() {
    ForEach([0, 1, 2, 3, 4, 5, 6, 7], () => {
      GridCol({ span: { sm: 12, md: 6, lg: 6 } }) {
        Column() {
          RepeatItemContent()
        }
      }
    })
  }
}

3.3顶部布局

栅格布局GridRow

TypeScript
@State needWrap: boolean = true

build() {
  GridRow() {
    // 第一行布局
    GridCol({ span: { sm: 12, md: 6, lg: 7 } }) {
      Row() {
        Text($r('app.string.recommended')).fontSize(24)
        Blank()
        Image($r('app.media.ic_public_more'))
          .width(32)
          .height(32)
          .visibility(this.needWrap ? Visibility.Visible : Visibility.None)
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
    }
    // 第二行布局
    GridCol({ span: { sm: 12, md: 6, lg: 5 } }) {
      Flex({ alignItems: ItemAlign.Center }) {
        Search({ placeholder: '猜您喜欢: 万水千山' })
        Image($r('app.media.audio_fm'))
          .width(32)
          .height(32)
        Image($r('app.media.ic_public_more'))
          .width(32)
          .height(32)
          .visibility(this.needWrap ? Visibility.None : Visibility.Visible)
      }
    }//控制显隐多余元素
  }.onBreakpointChange((breakpoint: string) => {
    if (breakpoint === 'sm') {
      this.needWrap = true
    } else {
      this.needWrap = false
    }
  })
}

3.复杂情况(判断手机的状态)

3.1折叠屏适配

TypeScript
// 当前折叠屏状态(若当前为折叠屏设备才有效)
@State curFoldStatus: display.FoldStatus = display.getFoldStatus();
if (display.isFoldable()) {
  // 监听折叠屏状态变更,更新折叠态
  display.on('foldStatusChange', (curFoldStatus: display.FoldStatus) => {
    this.curFoldStatus = curFoldStatus;
  })
}

build() {
   // 折叠屏UI展示
   if (display.isFoldable()) {
       ...
     }
   } else { // 非折叠屏UI展示
       ...
     }
   }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2325391.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Elasticsearch-实战案例

一、没有使用Elasticsearch的查询速度698ms 1.数据库模糊查询不走索引&#xff0c;在数据量较大的时候&#xff0c;查询性能很差。需要注意的是&#xff0c;数据库模糊查询随着表数据量的增多&#xff0c;查询性能的下降会非常明显&#xff0c;而搜索引擎的性能则不会随着数据增…

IP数据报报文格式

一 概述 IP数据报由两部分组成&#xff1a;首部数据部分。首部的前一部分是固定长度&#xff0c;一共20字节大小&#xff0c;是所有IP数据报文必须具有的&#xff1b;固定部分后面是一些可选字段&#xff0c;其长度是可变的。 二 首部固定部分各字段意义 &#xff08;1&…

openEuler24.03 LTS下安装Kafka集群

目录 前提条件 Kafka集群规划 下载Kafka 解压 设置环境变量 配置Kafka 分发到其他机器 分发安装文件 分发环境变量 启动Kafka 测试Kafka 关闭Kafka 集群启停脚本 问题及解决 前提条件 安装好ZooKeeper集群&#xff0c;可参考&#xff1a;openEuler24.03 LTS下安…

qt QQuaternion详解

1. 概述 QQuaternion 是 Qt 中用于表示三维空间中旋转的四元数类。它包含一个标量部分和一个三维向量部分&#xff0c;可以用来表示旋转操作。四元数在计算机图形学中广泛用于平滑的旋转和插值。 2. 重要方法 默认构造函数 QQuaternion::QQuaternion(); // 构造单位四元数 (1…

epoch、batch、batch size、step、iteration深度学习名词含义详细介绍

卷积神经网络训练中的三个核心概念&#xff1a;Epoch、Batch Size 和迭代次数 在深度学习中&#xff0c;理解一些基本的术语非常重要&#xff0c;这些术语对模型的训练过程、效率以及最终性能都有很大影响。以下是一些常见术语的含义介绍&#xff1a; 1. Epoch&#xff08;周…

TCP 协议算法解析 | RTT / 滑动窗口 / 拥塞控制

注&#xff1a;本文为 “TCP 协议算法解析” 相关文章合辑。 略作重排&#xff0c;未去重。 如有内容异常&#xff0c;请看原文。 TCP 的那些事儿&#xff08;上&#xff09; 2014 年 05 月 28 日 陈皓 TCP 是一个极为复杂的协议&#xff0c;因为它需要解决众多问题&#x…

卷积神经网络 - ResNet(残差网络)

残差网络(Residual Network&#xff0c;ResNet)通过给非线性的卷积层增加直连边 (Shortcut Connection)(也称为残差连接(Residual Connection))的方式来提高信息的传播效率。 这是一种特殊的深度神经网络结构&#xff0c;由 Kaiming He 等人在 2015 年提出&#xff0c;目的是解…

GreenPlum学习

简介 Greenplum是一个面向数据仓库应用的关系型数据库&#xff0c;因为有良好的体系结构&#xff0c;所以在数据存储、高并发、高可用、线性扩展、反应速度、易用性和性价比等方面有非常明显的优势。Greenplum是一种基于PostgreSQL的分布式数据库&#xff0c;其采用sharednothi…

传统神经网络、CNN与RNN

在网络上找了很多关于深度学习的资料&#xff0c;也总结了一点小心得&#xff0c;于是就有了下面这篇文章。这里内容较为简单&#xff0c;适合初学者查看&#xff0c;所以大佬看到这里就可以走了。 话不多说&#xff0c;上图 #mermaid-svg-Z3k5YhiQ2o5AnvZE {font-family:&quo…

无人机,雷达定点飞行时,位置发散,位置很飘,原因分析

参考&#xff1a; 无人车传感器 IMU与GPS数据融合进行定位机制_gps imu 组合定位原始数-CSDN博客 我的无人机使用雷达定位&#xff0c;位置模式很飘 雷达的更新频率也是10HZ&#xff0c; 而px飞控的频率是100HZ&#xff0c;没有对两者之间的频率差异做出处理 所以才导致无人…

【Linux探索学习】第二十九弹——线程概念:Linux线程的基本概念与线程控制详解

Linux学习笔记&#xff1a; https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言&#xff1a; 在现代操作系统中&#xff0c;线程是程序执行流的最小单元。与进程相比&#xff0c;线程更加轻量级&#xff0c;创建和销毁的开销更小&…

深入探索 iOS 卡顿优化

认识卡顿 一些概念 FPS&#xff1a;Frames Per Second&#xff0c;表示每秒渲染的帧数&#xff0c;通过用于衡量画面的流畅度&#xff0c;数值越高则表示画面越流畅。CPU&#xff1a;负责对象的创建和销毁、对象属性的调整、布局计算、文本的计算和排版、图片的格式转换和解码…

# 基于 OpenCV 的选择题自动批改系统实现

在教育领域&#xff0c;选择题的批改工作通常较为繁琐且重复性高。为了提高批改效率&#xff0c;我们可以利用计算机视觉技术&#xff0c;通过 OpenCV 实现选择题的自动批改。本文将详细介绍如何使用 Python 和 OpenCV 实现一个简单的选择题自动批改系统。 1. 项目背景 选择题…

身份验证:区块链如何让用户掌控一切

在网上证明你自称的身份变得越来越复杂。由于日常生活的很多方面现在都在网上进行&#xff0c;保护你的数字身份比以往任何时候都更加重要。 我们可能都接受过安全培训&#xff0c;这些培训鼓励我们选择安全的密码、启用双因素身份验证或回答安全问题&#xff0c;例如“你祖母…

嵌入式硬件: GPIO与二极管基础知识详解

1. 前言 在嵌入式系统和硬件开发中&#xff0c;GPIO&#xff08;通用输入输出&#xff09;是至关重要的控制方式&#xff0c;而二极管作为基础电子元件&#xff0c;广泛应用于信号整流、保护电路等。本文将从基础原理出发&#xff0c;深入解析GPIO的输入输出模式&#xff0c;包…

游戏引擎学习第194天

为当天的活动做铺垫 正在进行游戏开发中的调试和视图功能开发。目标是增加一些新功能&#xff0c;使得在开发过程中能够有效地检查游戏行为。今天的重点是推进用户界面&#xff08;UI&#xff09;的开发&#xff0c;并且尝试在调试变量的管理上找到一个折中的解决方案。计划探…

js文字两端对齐

目录 一、问题 二、原因及解决方法 三、总结 一、问题 1.text-align: justify; 不就可以了吗&#xff1f;但是实际测试无效 二、原因及解决方法 1.原因&#xff1a;text-align只对非最后一行文字有效。只有一行文字时&#xff0c;text-align无效&#xff0c;要用text-alig…

HarmonyOS 介绍

HarmonyOS简介 随着万物互联时代的开启&#xff0c;应用的设备底座将从几十亿手机扩展到数百亿IoT设备。全新的全场景设备体验&#xff0c;正深入改变消费者的使用习惯。 同时应用开发者也面临设备底座从手机单设备到全场景多设备的转变&#xff0c;全场景多设备的全新底座&am…

每天一篇目标检测文献(六)——Part One

今天看的是《Object Detection with Deep Learning: A Review》 目录 一、摘要 1.1 原文 1.2 翻译 二、介绍 2.1 信息区域选择 2.2 特征提取 2.3 分类 三、深度学习的简要回顾 3.1 历史、诞生、衰落和繁荣 3.2 CNN架构和优势 一、摘要 1.1 原文 Due to object dete…

ESXI 安装及封装第三方驱动和在ESXI系统下安装驱动

ESXI 安装及封装第三方驱动和在ESXI系统下安装驱动 准备工作在线安装 Windows PowerShell离线安装 Windows PowerShell更新在线更新离线更新 下载 ESXi-Customizer-PS-v2.6.0.ps1安装Python安装pip安装相关插件 下载离线捆绑包下载对应的网卡驱动&#xff08;如果纯净版可以进去…