前言Pura X Max 展开态最容易出现的一类问题是内容区域被直接撑满整屏。列表页还能通过双列、三列解决一部分空间问题阅读页、表单页、详情页就没这么简单了。标题、正文、输入框、说明文字一旦横向拉得太宽用户读起来会很累。尤其是详情说明、识别结果、长文本摘要这类内容宽度越大视线移动越长阅读效率反而下降。Pura X Max 外屏为 5.4 英寸内屏为 7.7 英寸外屏分辨率为 1848 × 1264内屏分辨率为 2584 × 1828系统版本为 HarmonyOS 6.1。展开态带来的横向空间很明显但这块空间不一定都要交给正文内容。HarmonyOS 多设备适配里页面元素会随着窗口尺寸变化调整布局窗口尺寸变化较大时也需要通过断点这类响应式能力调整页面结构。我在处理这类页面时会同时控制两件事页面边距和内容最大宽度。外屏保持紧凑展开态让内容居中并限制阅读区域宽度。问题出在内容跟着屏幕无限变宽很多详情页一开始会写成这样Column() { // 标题 // 正文 // 表单 } .width(100%) .padding(16)这在手机上没有问题。屏幕窄width(100%)加上 16vp 边距后正文宽度仍然处在一个比较舒服的范围里。到了 Pura X Max 展开态同样的写法会把内容拉得很宽。正文每一行变长表单输入框横向拉开卡片也贴近屏幕两侧。页面看起来确实“占满了”但可读性下降了。这类页面和卡片工作台不同。工作台可以用多列提高信息密度阅读页和表单页更需要控制宽度。大屏上应该给内容留出稳定的阅读范围再把剩余空间交给留白、辅助信息、侧边操作或背景层次。我通常会把页面拆成三层。第一层是屏幕容器占满窗口。第二层是内容容器根据窗口宽度设置边距和最大宽度。第三层是真正的业务卡片、表单和正文。这样处理后页面在窄屏下仍然紧凑展开态不会无限拉伸。边距和最大宽度一起调整单独调整padding不够。比如展开态把左右边距从 16vp 改成 32vp内容仍然可能很宽。单独设置最大宽度也不够。外屏下如果直接套一个固定最大宽度页面会显得生硬而且边缘空间不一定合适。更稳的做法是让断点同时影响两件事。compact 下左右边距 16vp内容宽度跟随窗口。medium 下左右边距 20vp内容仍然尽量铺满可用区域。expanded 下左右边距 24vp 起步同时把内容最大宽度限制在 760vp 左右。判断逻辑可以保持简单private getLayoutMode(): string { const width this.getEffectiveWidth(); if (width this.expandedWidth) { return expanded; } if (width this.mediumWidth) { return medium; } return compact; }内容宽度单独收束到一个函数里。private getContentMaxWidth(): number { if (this.isExpanded()) { return 760; } return this.getEffectiveWidth(); }这里的 760vp 不是硬标准。偏阅读的页面可以控制在 680vp 到 780vp偏表单的页面可以根据字段长度放宽到 840vp如果右侧还要放辅助面板主内容区可以继续收窄。把宽屏阅读区域跑起来下面这个页面模拟了一个材料详情页包含标题、摘要、正文和表单区域。页面顶部提供了“铺满”和“受控”两种模式方便直接对比宽屏下的阅读体验。选择“受控”后展开态内容会居中并限制最大宽度选择“铺满”后内容会跟随窗口横向撑开。页面可以放到entry/src/main/ets/pages/Index.ets运行。Pura X Max 适配调试可以使用 DevEco Studio 6.1.0并安装对应模拟器验证外屏和展开态表现。interface DetailBlock { id: number; title: string; content: string; } Entry Component struct Index { State private pageWidth: number 0; State private previewWidth: number 0; State private controlledWidth: boolean true; private readonly mediumWidth: number 600; private readonly expandedWidth: number 900; private readonly maxReadableWidth: number 760; private readonly blocks: DetailBlock[] [ { id: 1, title: 整理结果, content: 识别结果显示这是一条社区物业缴费提醒。主要信息包括缴费周期、缴费金额、截止时间、办理地点和联系方式。外屏下适合快速浏览标题和状态展开态下适合查看完整说明。 }, { id: 2, title: 处理建议, content: 这类提醒更适合保存为待办事项并在截止日期前一天触发提醒。如果用户已经处理过可以把记录标记为已完成避免后续重复提醒。 }, { id: 3, title: 适配观察, content: 当内容区域在展开态下无限拉宽时正文每一行会变得很长。阅读长文本时眼睛需要横向移动更远页面虽然占满了屏幕但阅读体验会变差。 } ]; private getEffectiveWidth(): number { if (this.previewWidth 0) { return this.previewWidth; } return this.pageWidth; } private getLayoutMode(): string { const width this.getEffectiveWidth(); if (width this.expandedWidth) { return expanded; } if (width this.mediumWidth) { return medium; } return compact; } private isCompact(): boolean { return this.getLayoutMode() compact; } private isMedium(): boolean { return this.getLayoutMode() medium; } private isExpanded(): boolean { return this.getLayoutMode() expanded; } private getPagePadding(): number { if (this.isExpanded()) { return 24; } if (this.isMedium()) { return 20; } return 16; } private getTitleSize(): number { if (this.isExpanded()) { return 30; } if (this.isMedium()) { return 26; } return 23; } private getModeText(): string { if (this.isExpanded()) { return expanded · 宽窗口; } if (this.isMedium()) { return medium · 中等窗口; } return compact · 窄窗口; } private getModeDesc(): string { if (!this.controlledWidth) { return 当前内容区域跟随窗口铺满宽屏下正文行长会明显增加。; } if (this.isExpanded()) { return 当前内容区域已限制最大宽度展开态下正文居中显示左右保留舒适留白。; } return 当前窗口宽度有限内容区域保持紧凑显示。; } private getContentWidth(): Length { if (!this.controlledWidth) { return 100%; } if (this.isExpanded()) { return this.maxReadableWidth; } return 100%; } private getPreviewContainerWidth(): Length { if (this.previewWidth 0) { return this.previewWidth; } return 100%; } private getBodyLineHeight(): number { if (this.isExpanded()) { return 25; } return 23; } private setPreview(width: number) { this.previewWidth width; } private setWidthMode(controlled: boolean) { this.controlledWidth controlled; } Builder private HeaderPanel() { Column({ space: 10 }) { Row() { Column({ space: 4 }) { Text(页面边距和最大内容宽度控制) .fontSize(this.getTitleSize()) .fontWeight(FontWeight.Bold) .fontColor(#111827) Text(this.getModeText()) .fontSize(14) .fontColor(#2F8F83) } .layoutWeight(1) Text(窗口 Math.round(this.pageWidth).toString() vp) .fontSize(12) .fontColor(#374151) .padding({ left: 10, right: 10, top: 6, bottom: 6 }) .backgroundColor(#FFFFFF) .borderRadius(999) } .width(100%) Text(演示宽度 Math.round(this.getEffectiveWidth()).toString() vp。 this.getModeDesc()) .fontSize(14) .fontColor(#6B7280) .lineHeight(21) Row({ space: 8 }) { this.PreviewButton(自动, 0) this.PreviewButton(外屏, 430) this.PreviewButton(中宽, 720) this.PreviewButton(展开态, 1040) } .width(100%) Row({ space: 8 }) { this.WidthModeButton(受控宽度, true) this.WidthModeButton(铺满宽度, false) } .width(100%) } .width(100%) } Builder private PreviewButton(text: string, width: number) { Text(text) .fontSize(12) .fontColor(this.previewWidth width ? #FFFFFF : #2F8F83) .textAlign(TextAlign.Center) .padding({ left: 10, right: 10, top: 7, bottom: 7 }) .backgroundColor(this.previewWidth width ? #2F8F83 : #E6F4F1) .borderRadius(999) .onClick(() { this.setPreview(width); }) } Builder private WidthModeButton(text: string, controlled: boolean) { Text(text) .fontSize(12) .fontColor(this.controlledWidth controlled ? #FFFFFF : #7C3AED) .textAlign(TextAlign.Center) .padding({ left: 10, right: 10, top: 7, bottom: 7 }) .backgroundColor(this.controlledWidth controlled ? #7C3AED : #F1EAFE) .borderRadius(999) .onClick(() { this.setWidthMode(controlled); }) } Builder private SummaryCard() { Column({ space: 12 }) { Row() { Text(材料详情) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#111827) Blank() Text(待处理) .fontSize(12) .fontColor(#B25E00) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .backgroundColor(#FFF4E5) .borderRadius(999) } .width(100%) Text(社区物业缴费提醒) .fontSize(this.isExpanded() ? 26 : 22) .fontWeight(FontWeight.Bold) .fontColor(#111827) .lineHeight(this.isExpanded() ? 34 : 29) Text(这是一条来自拍照整理的通知类材料。页面用于观察宽屏下正文区域和表单区域的宽度变化。) .fontSize(15) .fontColor(#4B5563) .lineHeight(23) Row({ space: 8 }) { this.MetaPill(拍照整理) this.MetaPill(通知) this.MetaPill(09:20) } .width(100%) } .width(100%) .padding(this.isExpanded() ? 20 : 16) .backgroundColor(#FFFFFF) .borderRadius(22) .shadow({ radius: 10, color: #10000000, offsetX: 0, offsetY: 4 }) } Builder private MetaPill(text: string) { Text(text) .fontSize(12) .fontColor(#4B5563) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .backgroundColor(#F3F4F6) .borderRadius(999) } Builder private TextBlock(block: DetailBlock) { Column({ space: 8 }) { Text(block.title) .fontSize(17) .fontWeight(FontWeight.Medium) .fontColor(#111827) Text(block.content) .fontSize(15) .fontColor(#4B5563) .lineHeight(this.getBodyLineHeight()) } .width(100%) .padding(this.isExpanded() ? 20 : 16) .backgroundColor(#FFFFFF) .borderRadius(20) .border({ width: 1, color: #E5E7EB }) } Builder private FormCard() { Column({ space: 14 }) { Text(处理表单) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#111827) Column({ space: 8 }) { Text(提醒标题) .fontSize(13) .fontColor(#6B7280) TextInput({ text: 社区物业缴费提醒 }) .height(42) .fontSize(15) .backgroundColor(#F9FAFB) .borderRadius(14) } .width(100%) Column({ space: 8 }) { Text(处理备注) .fontSize(13) .fontColor(#6B7280) TextArea({ text: 缴费前一天提醒并确认是否已经完成支付。 }) .height(this.isExpanded() ? 88 : 76) .fontSize(15) .backgroundColor(#F9FAFB) .borderRadius(14) } .width(100%) Button(保存处理结果) .height(44) .fontSize(15) .fontColor(#FFFFFF) .width(100%) .backgroundColor(#2F8F83) .borderRadius(22) } .width(100%) .padding(this.isExpanded() ? 20 : 16) .backgroundColor(#FFFFFF) .borderRadius(22) .shadow({ radius: 10, color: #10000000, offsetX: 0, offsetY: 4 }) } Builder private ContentArea() { Scroll() { Column({ space: 14 }) { this.SummaryCard() ForEach(this.blocks, (block: DetailBlock) { this.TextBlock(block) }, (block: DetailBlock) block.id.toString()) this.FormCard() } .width(100%) .padding({ bottom: 24 }) } .layoutWeight(1) .width(100%) .edgeEffect(EdgeEffect.Spring) } build() { Column() { Column({ space: 16 }) { this.HeaderPanel() Column() { this.ContentArea() } .width(this.getContentWidth()) .layoutWeight(1) } .width(this.getPreviewContainerWidth()) .height(100%) .padding({ left: this.getPagePadding(), right: this.getPagePadding(), top: 18, bottom: 16 }) .alignItems(HorizontalAlign.Center) } .width(100%) .height(100%) .alignItems(HorizontalAlign.Center) .backgroundColor(#F6F7F9) .onAreaChange((_: Area, newValue: Area) { const width Number(newValue.width); if (!Number.isNaN(width) width 0) { this.pageWidth width; } }) } }关键实现点和运行结果页面运行后先选择展开态再分别点击铺满宽度和受控宽度。铺满宽度下正文卡片和表单会横向拉满整个内容区域输入框也会变得很长。受控宽度下内容区域会居中宽度限制在 760vp左右留白明显增加阅读线条更短。外屏状态下页面仍然保持紧凑。左右边距是 16vp内容宽度跟随窗口不会因为最大宽度设置造成额外留白。中宽状态下页面边距变成 20vp内容仍然尽量利用当前空间。展开态下页面边距变成 24vp内容最大宽度开始生效。这里最重要的是getContentWidth()。private getContentWidth(): Length { if (!this.controlledWidth) { return 100%; } if (this.isExpanded()) { return this.maxReadableWidth; } return 100%; }它把宽屏下的阅读区域限制住。展开态不是让正文撑满屏幕而是让正文保持在更适合阅读的宽度里。页面边距由getPagePadding()控制。private getPagePadding(): number { if (this.isExpanded()) { return 24; } if (this.isMedium()) { return 20; } return 16; }最大宽度和边距配合起来页面在三种状态下会有不同表现窄屏优先利用空间中宽增加呼吸感宽屏控制阅读宽度。真实项目里演示按钮可以删掉只保留pageWidth和断点判断。详情页、表单页、文章页、识别结果页都适合用这种方式处理。尤其是 OCR 结果、会议纪要、合同条款、长说明文本如果不限制宽度展开态很容易变成“看起来很大读起来很累”。这个方案也有边界。统计卡片、图片瀑布流、看板入口这类页面不一定需要限制最大内容宽度它们更适合用多列布局提高信息密度。最大内容宽度更适合文本、表单和详情阅读场景。总结Pura X Max 展开态的页面适配不能只关注内容有没有填满屏幕。阅读页、详情页和表单页更需要控制内容宽度。外屏保持紧凑展开态增加边距并限制最大内容宽度页面会更稳定也更适合长文本阅读和表单填写。实际开发中可以把页面分成屏幕容器、内容容器和业务内容三层。屏幕容器负责占满窗口内容容器负责边距和最大宽度业务内容只关心自身结构。这样写出来的页面在外屏、展开态、分屏和 2in1 上都更容易保持一致的阅读体验。
鸿蒙 HarmonyOS 6 | Pura X Max 鸿蒙原生适配 07：页面边距和最大内容宽度控制
发布时间：2026/5/18 21:47:39
前言Pura X Max 展开态最容易出现的一类问题是内容区域被直接撑满整屏。列表页还能通过双列、三列解决一部分空间问题阅读页、表单页、详情页就没这么简单了。标题、正文、输入框、说明文字一旦横向拉得太宽用户读起来会很累。尤其是详情说明、识别结果、长文本摘要这类内容宽度越大视线移动越长阅读效率反而下降。Pura X Max 外屏为 5.4 英寸内屏为 7.7 英寸外屏分辨率为 1848 × 1264内屏分辨率为 2584 × 1828系统版本为 HarmonyOS 6.1。展开态带来的横向空间很明显但这块空间不一定都要交给正文内容。HarmonyOS 多设备适配里页面元素会随着窗口尺寸变化调整布局窗口尺寸变化较大时也需要通过断点这类响应式能力调整页面结构。我在处理这类页面时会同时控制两件事页面边距和内容最大宽度。外屏保持紧凑展开态让内容居中并限制阅读区域宽度。问题出在内容跟着屏幕无限变宽很多详情页一开始会写成这样Column() { // 标题 // 正文 // 表单 } .width(100%) .padding(16)这在手机上没有问题。屏幕窄width(100%)加上 16vp 边距后正文宽度仍然处在一个比较舒服的范围里。到了 Pura X Max 展开态同样的写法会把内容拉得很宽。正文每一行变长表单输入框横向拉开卡片也贴近屏幕两侧。页面看起来确实“占满了”但可读性下降了。这类页面和卡片工作台不同。工作台可以用多列提高信息密度阅读页和表单页更需要控制宽度。大屏上应该给内容留出稳定的阅读范围再把剩余空间交给留白、辅助信息、侧边操作或背景层次。我通常会把页面拆成三层。第一层是屏幕容器占满窗口。第二层是内容容器根据窗口宽度设置边距和最大宽度。第三层是真正的业务卡片、表单和正文。这样处理后页面在窄屏下仍然紧凑展开态不会无限拉伸。边距和最大宽度一起调整单独调整padding不够。比如展开态把左右边距从 16vp 改成 32vp内容仍然可能很宽。单独设置最大宽度也不够。外屏下如果直接套一个固定最大宽度页面会显得生硬而且边缘空间不一定合适。更稳的做法是让断点同时影响两件事。compact 下左右边距 16vp内容宽度跟随窗口。medium 下左右边距 20vp内容仍然尽量铺满可用区域。expanded 下左右边距 24vp 起步同时把内容最大宽度限制在 760vp 左右。判断逻辑可以保持简单private getLayoutMode(): string { const width this.getEffectiveWidth(); if (width this.expandedWidth) { return expanded; } if (width this.mediumWidth) { return medium; } return compact; }内容宽度单独收束到一个函数里。private getContentMaxWidth(): number { if (this.isExpanded()) { return 760; } return this.getEffectiveWidth(); }这里的 760vp 不是硬标准。偏阅读的页面可以控制在 680vp 到 780vp偏表单的页面可以根据字段长度放宽到 840vp如果右侧还要放辅助面板主内容区可以继续收窄。把宽屏阅读区域跑起来下面这个页面模拟了一个材料详情页包含标题、摘要、正文和表单区域。页面顶部提供了“铺满”和“受控”两种模式方便直接对比宽屏下的阅读体验。选择“受控”后展开态内容会居中并限制最大宽度选择“铺满”后内容会跟随窗口横向撑开。页面可以放到entry/src/main/ets/pages/Index.ets运行。Pura X Max 适配调试可以使用 DevEco Studio 6.1.0并安装对应模拟器验证外屏和展开态表现。interface DetailBlock { id: number; title: string; content: string; } Entry Component struct Index { State private pageWidth: number 0; State private previewWidth: number 0; State private controlledWidth: boolean true; private readonly mediumWidth: number 600; private readonly expandedWidth: number 900; private readonly maxReadableWidth: number 760; private readonly blocks: DetailBlock[] [ { id: 1, title: 整理结果, content: 识别结果显示这是一条社区物业缴费提醒。主要信息包括缴费周期、缴费金额、截止时间、办理地点和联系方式。外屏下适合快速浏览标题和状态展开态下适合查看完整说明。 }, { id: 2, title: 处理建议, content: 这类提醒更适合保存为待办事项并在截止日期前一天触发提醒。如果用户已经处理过可以把记录标记为已完成避免后续重复提醒。 }, { id: 3, title: 适配观察, content: 当内容区域在展开态下无限拉宽时正文每一行会变得很长。阅读长文本时眼睛需要横向移动更远页面虽然占满了屏幕但阅读体验会变差。 } ]; private getEffectiveWidth(): number { if (this.previewWidth 0) { return this.previewWidth; } return this.pageWidth; } private getLayoutMode(): string { const width this.getEffectiveWidth(); if (width this.expandedWidth) { return expanded; } if (width this.mediumWidth) { return medium; } return compact; } private isCompact(): boolean { return this.getLayoutMode() compact; } private isMedium(): boolean { return this.getLayoutMode() medium; } private isExpanded(): boolean { return this.getLayoutMode() expanded; } private getPagePadding(): number { if (this.isExpanded()) { return 24; } if (this.isMedium()) { return 20; } return 16; } private getTitleSize(): number { if (this.isExpanded()) { return 30; } if (this.isMedium()) { return 26; } return 23; } private getModeText(): string { if (this.isExpanded()) { return expanded · 宽窗口; } if (this.isMedium()) { return medium · 中等窗口; } return compact · 窄窗口; } private getModeDesc(): string { if (!this.controlledWidth) { return 当前内容区域跟随窗口铺满宽屏下正文行长会明显增加。; } if (this.isExpanded()) { return 当前内容区域已限制最大宽度展开态下正文居中显示左右保留舒适留白。; } return 当前窗口宽度有限内容区域保持紧凑显示。; } private getContentWidth(): Length { if (!this.controlledWidth) { return 100%; } if (this.isExpanded()) { return this.maxReadableWidth; } return 100%; } private getPreviewContainerWidth(): Length { if (this.previewWidth 0) { return this.previewWidth; } return 100%; } private getBodyLineHeight(): number { if (this.isExpanded()) { return 25; } return 23; } private setPreview(width: number) { this.previewWidth width; } private setWidthMode(controlled: boolean) { this.controlledWidth controlled; } Builder private HeaderPanel() { Column({ space: 10 }) { Row() { Column({ space: 4 }) { Text(页面边距和最大内容宽度控制) .fontSize(this.getTitleSize()) .fontWeight(FontWeight.Bold) .fontColor(#111827) Text(this.getModeText()) .fontSize(14) .fontColor(#2F8F83) } .layoutWeight(1) Text(窗口 Math.round(this.pageWidth).toString() vp) .fontSize(12) .fontColor(#374151) .padding({ left: 10, right: 10, top: 6, bottom: 6 }) .backgroundColor(#FFFFFF) .borderRadius(999) } .width(100%) Text(演示宽度 Math.round(this.getEffectiveWidth()).toString() vp。 this.getModeDesc()) .fontSize(14) .fontColor(#6B7280) .lineHeight(21) Row({ space: 8 }) { this.PreviewButton(自动, 0) this.PreviewButton(外屏, 430) this.PreviewButton(中宽, 720) this.PreviewButton(展开态, 1040) } .width(100%) Row({ space: 8 }) { this.WidthModeButton(受控宽度, true) this.WidthModeButton(铺满宽度, false) } .width(100%) } .width(100%) } Builder private PreviewButton(text: string, width: number) { Text(text) .fontSize(12) .fontColor(this.previewWidth width ? #FFFFFF : #2F8F83) .textAlign(TextAlign.Center) .padding({ left: 10, right: 10, top: 7, bottom: 7 }) .backgroundColor(this.previewWidth width ? #2F8F83 : #E6F4F1) .borderRadius(999) .onClick(() { this.setPreview(width); }) } Builder private WidthModeButton(text: string, controlled: boolean) { Text(text) .fontSize(12) .fontColor(this.controlledWidth controlled ? #FFFFFF : #7C3AED) .textAlign(TextAlign.Center) .padding({ left: 10, right: 10, top: 7, bottom: 7 }) .backgroundColor(this.controlledWidth controlled ? #7C3AED : #F1EAFE) .borderRadius(999) .onClick(() { this.setWidthMode(controlled); }) } Builder private SummaryCard() { Column({ space: 12 }) { Row() { Text(材料详情) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#111827) Blank() Text(待处理) .fontSize(12) .fontColor(#B25E00) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .backgroundColor(#FFF4E5) .borderRadius(999) } .width(100%) Text(社区物业缴费提醒) .fontSize(this.isExpanded() ? 26 : 22) .fontWeight(FontWeight.Bold) .fontColor(#111827) .lineHeight(this.isExpanded() ? 34 : 29) Text(这是一条来自拍照整理的通知类材料。页面用于观察宽屏下正文区域和表单区域的宽度变化。) .fontSize(15) .fontColor(#4B5563) .lineHeight(23) Row({ space: 8 }) { this.MetaPill(拍照整理) this.MetaPill(通知) this.MetaPill(09:20) } .width(100%) } .width(100%) .padding(this.isExpanded() ? 20 : 16) .backgroundColor(#FFFFFF) .borderRadius(22) .shadow({ radius: 10, color: #10000000, offsetX: 0, offsetY: 4 }) } Builder private MetaPill(text: string) { Text(text) .fontSize(12) .fontColor(#4B5563) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .backgroundColor(#F3F4F6) .borderRadius(999) } Builder private TextBlock(block: DetailBlock) { Column({ space: 8 }) { Text(block.title) .fontSize(17) .fontWeight(FontWeight.Medium) .fontColor(#111827) Text(block.content) .fontSize(15) .fontColor(#4B5563) .lineHeight(this.getBodyLineHeight()) } .width(100%) .padding(this.isExpanded() ? 20 : 16) .backgroundColor(#FFFFFF) .borderRadius(20) .border({ width: 1, color: #E5E7EB }) } Builder private FormCard() { Column({ space: 14 }) { Text(处理表单) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#111827) Column({ space: 8 }) { Text(提醒标题) .fontSize(13) .fontColor(#6B7280) TextInput({ text: 社区物业缴费提醒 }) .height(42) .fontSize(15) .backgroundColor(#F9FAFB) .borderRadius(14) } .width(100%) Column({ space: 8 }) { Text(处理备注) .fontSize(13) .fontColor(#6B7280) TextArea({ text: 缴费前一天提醒并确认是否已经完成支付。 }) .height(this.isExpanded() ? 88 : 76) .fontSize(15) .backgroundColor(#F9FAFB) .borderRadius(14) } .width(100%) Button(保存处理结果) .height(44) .fontSize(15) .fontColor(#FFFFFF) .width(100%) .backgroundColor(#2F8F83) .borderRadius(22) } .width(100%) .padding(this.isExpanded() ? 20 : 16) .backgroundColor(#FFFFFF) .borderRadius(22) .shadow({ radius: 10, color: #10000000, offsetX: 0, offsetY: 4 }) } Builder private ContentArea() { Scroll() { Column({ space: 14 }) { this.SummaryCard() ForEach(this.blocks, (block: DetailBlock) { this.TextBlock(block) }, (block: DetailBlock) block.id.toString()) this.FormCard() } .width(100%) .padding({ bottom: 24 }) } .layoutWeight(1) .width(100%) .edgeEffect(EdgeEffect.Spring) } build() { Column() { Column({ space: 16 }) { this.HeaderPanel() Column() { this.ContentArea() } .width(this.getContentWidth()) .layoutWeight(1) } .width(this.getPreviewContainerWidth()) .height(100%) .padding({ left: this.getPagePadding(), right: this.getPagePadding(), top: 18, bottom: 16 }) .alignItems(HorizontalAlign.Center) } .width(100%) .height(100%) .alignItems(HorizontalAlign.Center) .backgroundColor(#F6F7F9) .onAreaChange((_: Area, newValue: Area) { const width Number(newValue.width); if (!Number.isNaN(width) width 0) { this.pageWidth width; } }) } }关键实现点和运行结果页面运行后先选择展开态再分别点击铺满宽度和受控宽度。铺满宽度下正文卡片和表单会横向拉满整个内容区域输入框也会变得很长。受控宽度下内容区域会居中宽度限制在 760vp左右留白明显增加阅读线条更短。外屏状态下页面仍然保持紧凑。左右边距是 16vp内容宽度跟随窗口不会因为最大宽度设置造成额外留白。中宽状态下页面边距变成 20vp内容仍然尽量利用当前空间。展开态下页面边距变成 24vp内容最大宽度开始生效。这里最重要的是getContentWidth()。private getContentWidth(): Length { if (!this.controlledWidth) { return 100%; } if (this.isExpanded()) { return this.maxReadableWidth; } return 100%; }它把宽屏下的阅读区域限制住。展开态不是让正文撑满屏幕而是让正文保持在更适合阅读的宽度里。页面边距由getPagePadding()控制。private getPagePadding(): number { if (this.isExpanded()) { return 24; } if (this.isMedium()) { return 20; } return 16; }最大宽度和边距配合起来页面在三种状态下会有不同表现窄屏优先利用空间中宽增加呼吸感宽屏控制阅读宽度。真实项目里演示按钮可以删掉只保留pageWidth和断点判断。详情页、表单页、文章页、识别结果页都适合用这种方式处理。尤其是 OCR 结果、会议纪要、合同条款、长说明文本如果不限制宽度展开态很容易变成“看起来很大读起来很累”。这个方案也有边界。统计卡片、图片瀑布流、看板入口这类页面不一定需要限制最大内容宽度它们更适合用多列布局提高信息密度。最大内容宽度更适合文本、表单和详情阅读场景。总结Pura X Max 展开态的页面适配不能只关注内容有没有填满屏幕。阅读页、详情页和表单页更需要控制内容宽度。外屏保持紧凑展开态增加边距并限制最大内容宽度页面会更稳定也更适合长文本阅读和表单填写。实际开发中可以把页面分成屏幕容器、内容容器和业务内容三层。屏幕容器负责占满窗口内容容器负责边距和最大宽度业务内容只关心自身结构。这样写出来的页面在外屏、展开态、分屏和 2in1 上都更容易保持一致的阅读体验。
相关文章
OptiLLM：大模型推理与微调优化算法库实战指南
1. 项目概述：一个为大型语言模型优化的算法库最近在折腾大语言模型（LLM）的推理和微调时，发现了一个挺有意思的项目：algorithmicsuperintelligence/optillm。乍一看这个名字，opti和llm的组合，基本…
单例模式深度解析：从基础实现到生产级避坑指南
1. 单例模式：为什么它既是基石又是“坑”在软件开发的江湖里，单例模式（Singleton Pattern）的名号，几乎无人不知。它被写进教科书，是设计模式中最容易理解、也最常被提及的模式之一。但有趣的是，…
从I.MX6ULL网关到Qt上位机：多线程架构下的智慧农场无线通信系统实战解析
1. 智慧农场物联网系统的核心挑战 在现代化农业生产中，物联网技术正在彻底改变传统耕作模式。我最近完成的一个智慧农场项目，就遇到了几个典型的技术难题：如何让分布在田间地头的各类传感器稳定联网？怎样处理ZigBee、蓝牙、Wi-Fi这…
从CutMix到Mosaic：聊聊目标检测数据增强的‘缝合’艺术与边界框的那些坑
从CutMix到Mosaic：目标检测数据增强的边界艺术与工程实践 在计算机视觉领域，数据增强技术如同一位隐形的魔术师，通过巧妙的图像变换创造出丰富的训练样本。当我们将目光聚焦于目标检测任务时，数据增强的艺术性便与技术性产生了奇妙…
5分钟快速上手：SketchUp STL插件的完整使用指南
5分钟快速上手：SketchUp STL插件的完整使用指南 【免费下载链接】sketchup-stl A SketchUp Ruby Extension that adds STL (STereoLithography) file format import and export. 项目地址: https://gitcode.com/gh_mirrors/sk/sketchup-stl 想要将你的Sketch…
开源Claude本地部署指南：从模型选型到性能调优实战
1. 项目概述：当开源精神遇上AI推理最近在折腾本地部署大语言模型的朋友，估计都绕不开一个名字：Claude。作为Anthropic家的明星产品，Claude系列模型以其出色的推理能力、对指令的精准理解和强大的安全性，在开发者圈子里…
基于Emissaries框架构建多AI智能体协作系统：从原理到实践
1. 项目概述：一个基于AI的智能体协作框架最近在开源社区里，一个名为muinyc/emissaries的项目引起了我的注意。乍一看这个名字，你可能会联想到“使者”或“特使”，这其实非常贴切地揭示了它的核心定位。简单来说，Emissa…
GTA5线上小助手：三步快速上手终极游戏增强工具
GTA5线上小助手：三步快速上手终极游戏增强工具 【免费下载链接】GTA5OnlineTools GTA5线上小助手 项目地址: https://gitcode.com/gh_mirrors/gt/GTA5OnlineTools 在广阔的洛圣都世界中，你是否渴望获得更加流畅、个性化的游戏体验？GTA…
长期使用 Taotoken 聚合服务对项目运维复杂度的实际降低效果
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 长期使用 Taotoken 聚合服务对项目运维复杂度的实际降低效果 1. 从多厂商分散管理到统一接入 在构建依赖大模型能力的应用时&…
精益管理推不动？找准根源+避坑指南，破解全员参与难题
很多工厂推行精益管理，都陷入了管理层热、员工冷的尴尬困境：管理层耗费大量精力制定精益方案、投入资源，却始终推不动，一线员工要么被动应付，要么抵触反抗，不主动识别浪费、不参与改善，精益落地…
基于React与Zustand构建现代化个人站点导航器：从设计到部署全解析
1. 项目概述：一个现代站点导航器的诞生最近在整理自己的浏览器书签和常用工具时，我发现自己陷入了一个典型的“数字混乱”状态。收藏夹里塞满了各种链接，从开发文档、设计资源到日常工具，杂乱无章。每次想找一个特定的网站&#x…
开发团队如何通过 Taotoken 实现 API 密钥的统一管理与审计
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 开发团队如何通过 Taotoken 实现 API 密钥的统一管理与审计 对于开发团队而言，安全、高效地管理大模型 API 密钥是一项…
【实用小程序】超轻量级文件上传下载中心 (File Download Server)
站内源码及jar包下载 一、项目概述 文件下载中心一个基于 Java 内置 HTTP 服务器（com.sun.net.httpserver）构建的轻量级文件管理服务。它零第三方依赖，单 JAR 包即可运行，适合在内网环境或临时场景中快速搭建文件共享站点。 你的团队需要临时共享一批日志文件或交付物，…
py每日spider案例之某website之xin东方选课搜索接口(难度一般 扣取代码即可)
加密位置: 逆向接口参数: 逆向接口: const g = globalThis; g.window = g; g.self = g; g.location = {<
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南 【免费下载链接】markor Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, .. 项目地址: https://gitcode.com/gh_mirrors/ma/markor 在移动设备上寻找一款…
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目地址:…
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南 【免费下载链接】STL-Volume-Model-Calculator STL Volume Model Calculator Python 项目地址: https://gitcode.com/gh_mirrors/st/STL-Volume-Model-Calculator 你是否曾经为3D打印项目…
通过Taotoken CLI工具一键配置团队开发环境与模型密钥
通过Taotoken CLI工具一键配置团队开发环境与模型密钥 1. CLI工具安装与基本使用 Taotoken提供的CLI工具可通过npm全局安装或直接使用npx运行。对于需要频繁使用CLI的团队，推荐全局安装： npm install -g taotoken/taotoken对于临时使用或项目级配置&a…