鸿蒙 HarmonyOS 6 | Pura X Max 鸿蒙原生适配 19：设置页在 Pura X Max 上改成分组布局

前言

设置页很容易被写成一条长列表。账号、通知、权限、缓存、关于应用，全都从上到下排。手机外屏上这么写没有太大问题，用户打开设置页以后，从顶部一路往下找，看到需要的设置项就点进去。设置项数量不多时，单列列表甚至是最省事的写法。

我把同样的设置页放到 Pura X Max 展开态里看时，第一眼注意到的是设置项被拉得太长。左侧是设置标题，右侧是开关、状态或者跳转入口，中间被屏幕宽度拉开了一大段。用户看相机权限时，视线要从左侧标题扫到右侧状态；看版本号时，也要在一条很长的横向区域里找到对应值。单个设置项还能读，整页的分组关系却变弱了。

设置页和搜索页、列表页的使用方式不一样。搜索页会频繁调整条件，列表页主要用来浏览内容；设置页更像一个低频但要快速定位的功能入口集合。用户不一定每天打开设置页，但一旦打开，通常是带着明确目的进来的，比如改通知、看权限、清理缓存、查看版本、打开某个开关。这个时候，分类定位比单纯把列表拉宽更有价值。

这类设置页通常会包含几组内容。

• 基础设置，比如显示方式、通知提醒、自动保存
• 权限设置，比如相机、相册、麦克风、通知权限
• 数据设置，比如缓存、同步、导入导出
• 关于应用，比如版本号、隐私协议、用户协议、反馈入口

Pura X Max 展开态空间足够把设置页拆成左侧分类和右侧设置项，外屏和较窄窗口继续保留单列设置列表。鸿蒙里的全屏、分屏、自由窗口都会改变应用可用宽度，设置页如果只把手机端长列表拉宽，很快会遇到分类弱、行距远、定位慢这些问题。

我这次用一个设置页示例来验证这种改法。页面包含基础设置、权限设置、关于应用三个分类。小屏下仍然按分组从上到下展示；展开态下左侧显示分类卡片，右侧只展示当前分类下的设置项。这样用户在大屏里可以先选分类，再看具体设置，不需要在一条很长的设置列表里不断向下扫。

一、设置页不能只拉宽

1.1 外屏单列适合连续浏览

外屏下，设置页用单列结构是合理的。设置项按分组向下排列，用户进入页面以后，从顶部看到基础设置，再往下看到权限设置、关于应用。屏幕窄，单列列表能保证每个设置项都有足够的横向空间，标题、说明、右侧状态或开关都能放得下。

最常见的写法是这样的。

Column() { this.SettingSection('基础设置') this.SettingSection('权限设置') this.SettingSection('关于应用') } .width('100%')

这个结构维护起来也简单。每个分组是一段列表，新增设置项时继续往对应分组里加。手机外屏上，用户滚动一下就能看到所有设置内容，页面也不会被左右拆开。

我以前做手机端设置页时，也会先用这种结构。设置页不是高频操作页，单列列表的可理解性很好。只要分组标题明确，设置项说明写得具体，小屏体验通常不会出大问题。这个时候没有必要为了大屏思维提前把页面拆复杂。

1.2 展开态单列会拉长信息路径

展开态里继续使用单列，问题会换一种方式出现。每一行设置项被拉得很宽，右侧开关或状态离左侧标题很远。用户看通知提醒时，标题在左，开关在右；看缓存清理时，说明在左，操作入口在右。单行看起来没有错，但整页的阅读路径被横向拉长了。

设置页在大屏里更需要分类定位。用户进来以后，应该先看到基础设置、权限设置、关于应用这些方向，再进入某一组具体设置。比如我想检查相机权限，就不该从通知提醒、自动保存、深色模式一路扫过去；我想看版本和隐私协议，也不需要穿过所有基础设置。

我会把大屏设置页拆成三个区域关系进行分析。

这个表格能帮我避免一个误区。展开态不一定要展示更多设置项，它更应该把设置项的组织关系摆出来。左侧分类不是装饰，它承担的是入口定位；右侧设置项才是具体操作区域。

二、先拆分类，再拆设置项

2.1 分类要从标题变成入口

在单列设置页里，基础设置、权限设置、关于应用只是分组标题。它们帮助用户理解下面的设置项属于哪一类，但不会参与交互。到了展开态，这些分组标题可以升级成左侧分类导航。用户点击左侧分类，右侧切换对应设置项。

这个变化不只是把 UI 从上下结构改成左右结构，还牵涉到一个基础的状态设计。当前选中的设置分类要放在页面层，因为左侧分类和右侧设置项都要读取它。左侧需要知道哪个分类高亮，右侧需要知道展示哪组设置项。

示例里用selectedGroupId保存当前分类。

@State private selectedGroupId: number = 1;

这个状态不能放在左侧分类组件里。左侧分类只是触发切换的入口，右侧内容也需要它。把状态放在页面层以后，外屏和展开态都能读同一份当前分类状态，窗口宽度变化时也不会重置。

这里其实是一个很常见的编程常识：当两个区域都依赖同一个状态时，状态应该提升到它们共同的父级。设置页左右分栏只是一个具体场景，列表详情、搜索筛选、图片预览里的左右区域也会遇到同样的问题。

2.2 设置项要用同一套数据

我不建议为基础设置、权限设置、关于应用分别写三套 UI。它们的业务含义不同，但展示结构很接近：标题、说明、右侧内容、类型和状态。这样就可以抽成统一的设置项数据，再根据type决定右侧展示开关、文本、按钮还是跳转状态。

设置项可以先按这样的结构理解。

不同类型的设置项，可以走同一个SettingRow()，再根据type决定右侧展示什么。这个写法比每个分组手写一堆 Row 更适合维护。后面新增数据同步、订阅管理、隐私协议、实验功能这些内容时，也只是新增数据，不需要改布局结构。

这里还要留意设置项说明的长度。说明文字太长，小屏里会把行高撑得过高，展开态里也会让右侧列表变得松散。设置项说明只解释当前设置的影响就够了，完整帮助文档不要放进设置行。

三、分栏前先保住右侧

3.1 分类栏不能抢设置项宽度

设置页的左侧分类栏不需要太宽，但右侧设置项列表必须能读。展开态分栏如果只看窗口是否超过某个阈值，可能会出现左侧分类栏出现了，右侧设置项却被压得很窄。标题、说明、开关、状态挤在一行里，页面看起来进入了大屏结构，实际操作并没有变轻松。

我会先给左侧分类栏和右侧设置项列表分别留宽度。示例里左侧分类栏是 260vp，右侧设置项列表至少保留 560vp，中间间距是 16vp。进入双栏前，先计算这些区域是否真的放得下。

private readonly groupPanelWidth: number = 260; private readonly detailMinWidth: number = 560; private readonly twoColumnGap: number = 16;

这些数字不用照搬。设置项比较短时，右侧 520vp 也可以；如果设置项说明更多，或者右侧同时出现开关、状态、按钮，右侧最小宽度就要提高。大屏适配不该看到宽度变大就马上分栏，分栏前要先确认主操作区域还能正常阅读和点击。

3.2 可用宽度比屏幕宽度更有用

示例里的判断会先扣掉左右 padding，再计算左侧分类栏、右侧详情区和中间间距。

private canUseSplitSettings(): boolean { const width = this.getEffectiveWidth(); const availableWidth = width - this.getPagePadding() * 2; const requiredWidth = this.groupPanelWidth + this.twoColumnGap + this.detailMinWidth; return width >= this.expandedThreshold && availableWidth >= requiredWidth; }

这里有个常见误区，很多布局判断会直接拿窗口宽度和阈值比较。这个写法短期能用，但只要页面加了左右 padding、卡片间距、侧栏宽度，就容易在中间尺寸出问题。设置页这种页面尤其容易被忽略，因为它看起来只是普通列表，实际右侧每一行都有标题、说明、开关或状态，不能被压得太窄。

我会把canUseSplitSettings()放在页面层。页面层负责判断采用单列还是双栏；左侧分类组件只负责分类展示；右侧设置项列表只负责当前分类的设置项。这样组件职责会更清楚，后面新增设置分类时，也不会影响断点逻辑。

四、实际运行结果

4.1 外屏先保留单列列表

这个示例会模拟一个设置页。小屏下，基础设置、权限设置、关于应用三个分组按顺序排列，用户从上往下滚动。展开态下，左侧显示三个设置分类，右侧显示当前分类下的设置项。点击左侧分类时，右侧内容切换。

小屏状态下，我会继续保留单列列表。原因很直接：设置项虽然多，但屏幕宽度有限，强行做左右结构会让两边都很窄。用户在小屏里从上往下浏览，不会因为多一次滚动就失去方向。只要分组标题足够清楚，单列结构可以继续使用。

4.2 展开态再把分类放左侧

展开态截图要看左侧分类和右侧设置项之间的关系。左侧分类高亮当前分类，右侧只显示当前分类下的设置项。这样用户不需要在长列表里继续寻找权限、关于应用或者缓存设置。

这个示例里还保留了几个开关状态，比如通知提醒、自动保存、深色模式。真实项目里，这些状态可以来自本地持久化配置；权限类设置则要来自系统权限状态；关于应用里的版本号、协议入口、反馈入口可以来自应用配置。

五、真实项目时怎么处理

5.1 分类和设置项最好来自配置

示例里的设置组和设置项写在页面里，是为了让代码可以直接运行。真实项目里，设置项通常会随着版本持续增加，比如订阅、数据同步、隐私、缓存、实验功能。继续把所有设置行写死在页面里，后面会越来越难维护。

我会把设置页拆成配置数据：

• 分类配置负责标题、说明、图标和排序
• 设置项配置负责标题、说明、类型、右侧文案、点击动作
• 页面状态负责当前选中分类和开关状态
• 具体业务逻辑交给对应服务处理

这样设置页的 UI 结构会更稳定。新增一个设置项时，优先改配置；新增一个业务动作时，再补对应处理函数。页面本身不需要因为每个设置项都去加一段重复代码。

5.2 权限设置要接真实状态

权限设置是设置页里比较特殊的一类。示例里用去开启、已授权这类文案模拟状态，真实项目里要接系统权限查询结果。相机、相册、麦克风、通知这些权限，用户可能在系统设置里改掉，回到应用后页面要能刷新状态。

这个地方不能只靠本地开关模拟。权限状态应该来自系统能力或应用启动后的检查结果，设置页只负责展示和跳转。比如用户点击相机权限，页面可以跳到授权引导或系统权限设置；用户返回后，再刷新当前权限状态。

5.3 关于应用单独成组

关于应用这类信息经常被随手放到设置页底部。手机上这么放可以接受，展开态里如果继续和基础设置混在一起，用户会在通知开关、自动保存、缓存清理这些设置项之间找版本号和协议入口。

我会把关于应用单独做成一个分类。版本号、隐私政策、用户协议、反馈入口、开发者信息，都放到同一个分类下。这样右侧区域展示时也更清楚，用户不会在一条很长的设置列表里找这些低频但重要的入口。

总结

设置页在 Pura X Max 展开态里，不一定要继续做成长单列。外屏下，单列设置列表适合连续浏览；展开态里，把分类放到左侧、设置项放到右侧，用户更容易先定位方向，再处理具体设置。

我后面处理设置页时，会先把内容按这几类拆开：

• 基础设置放常用开关，比如通知、自动保存、深色模式。
• 权限设置放相机、相册、麦克风、通知权限，并接真实权限状态。
• 关于应用放版本号、协议、反馈和开发者信息。
• 数据和缓存类设置可以单独成组，不要混在基础设置里。
• 展开态是否分栏，要先确认右侧设置项区域还有足够宽度。

真实项目里，设置页会随着版本持续增长。分类和设置项最好配置化，页面层只负责选中分类、布局判断和状态分发。这样外屏单列、展开态双栏都能读同一套数据，后面新增设置项时，也不会把页面写成越来越长的一整段 UI。

附：完整代码

interface SettingGroup { id: number; title: string; desc: string; badge: string; } interface SettingItem { id: number; groupId: number; title: string; desc: string; type: string; value: string; key: string; } @Entry @Component struct Index { // 页面真实宽度，由 onAreaChange 写入 @State private pageWidth: number = 0; // 演示宽度，只用于在同一个模拟器里观察外屏和展开态 @State private previewWidth: number = 0; // 展开态左侧选中的设置分类 @State private selectedGroupId: number = 1; // 模拟几个设置项状态，真实项目里可以来自持久化配置或系统权限查询 @State private notifyEnabled: boolean = true; @State private autoSaveEnabled: boolean = true; @State private darkModeEnabled: boolean = false; @State private cacheClearedCount: number = 0; private readonly expandedThreshold: number = 860; private readonly groupPanelWidth: number = 260; private readonly detailMinWidth: number = 560; private readonly twoColumnGap: number = 16; private readonly groups: SettingGroup[] = [ { id: 1, title: '基础设置', desc: '通知、显示和保存偏好', badge: '常用' }, { id: 2, title: '权限设置', desc: '相机、相册和麦克风权限', badge: '权限' }, { id: 3, title: '关于应用', desc: '版本、协议和反馈入口', badge: '信息' } ]; private readonly items: SettingItem[] = [ { id: 1, groupId: 1, title: '通知提醒', desc: '处理结果保存后，按提醒时间发送通知', type: 'switch', value: '', key: 'notify' }, { id: 2, groupId: 1, title: '自动保存', desc: '识别结果确认后自动保存到本地记录', type: 'switch', value: '', key: 'autoSave' }, { id: 3, groupId: 1, title: '深色模式', desc: '跟随系统外观，夜间查看内容时减少刺眼背景', type: 'switch', value: '', key: 'darkMode' }, { id: 4, groupId: 1, title: '清理缓存', desc: '清理临时缩略图和识别过程缓存', type: 'action', value: '清理', key: 'cache' }, { id: 5, groupId: 2, title: '相机权限', desc: '用于拍摄通知、票据和白板照片', type: 'link', value: '去开启', key: 'camera' }, { id: 6, groupId: 2, title: '相册权限', desc: '用于从相册选择已有图片进行整理', type: 'link', value: '已授权', key: 'album' }, { id: 7, groupId: 2, title: '麦克风权限', desc: '用于后续语音整理和会议内容识别', type: 'link', value: '去开启', key: 'microphone' }, { id: 8, groupId: 2, title: '通知权限', desc: '用于发送待办提醒和处理结果提醒', type: 'link', value: '已授权', key: 'push' }, { id: 9, groupId: 3, title: '当前版本', desc: '查看当前安装的应用版本', type: 'value', value: '1.0.0', key: 'version' }, { id: 10, groupId: 3, title: '隐私政策', desc: '查看数据存储、权限使用和第三方服务说明', type: 'link', value: '查看', key: 'privacy' }, { id: 11, groupId: 3, title: '用户协议', desc: '查看应用使用条款和免责声明', type: 'link', value: '查看', key: 'terms' }, { id: 12, groupId: 3, title: '问题反馈', desc: '提交使用过程中遇到的问题或建议', type: 'link', value: '反馈', key: 'feedback' } ]; // Demo 中优先使用演示宽度，真实项目里可以直接返回 pageWidth private getEffectiveWidth(): number { if (this.previewWidth > 0) { return this.previewWidth; } return this.pageWidth; } private getPagePadding(): number { if (this.getEffectiveWidth() >= this.expandedThreshold) { return 24; } return 16; } // 分栏前先确认左侧分类栏、间距和右侧设置项区域都能放下 private canUseSplitSettings(): boolean { const width = this.getEffectiveWidth(); const availableWidth = width - this.getPagePadding() * 2; const requiredWidth = this.groupPanelWidth + this.twoColumnGap + this.detailMinWidth; return width >= this.expandedThreshold && availableWidth >= requiredWidth; } private isExpanded(): boolean { return this.canUseSplitSettings(); } private getContentWidth(): Length { if (this.previewWidth > 0) { return this.previewWidth; } return '100%'; } private getTitleSize(): number { return this.isExpanded() ? 28 : 23; } private getModeText(): string { return this.isExpanded() ? 'expanded · 分类 + 设置项' : 'compact · 单列设置'; } private getModeDesc(): string { if (this.isExpanded()) { return '展开态下左侧显示设置分类，右侧显示当前分类下的设置项。'; } return '小屏下设置项按分组从上到下排列，保持普通设置列表结构。'; } private setPreview(width: number) { this.previewWidth = width; } private getSelectedGroup(): SettingGroup { const found = this.groups.find((item: SettingGroup) => item.id === this.selectedGroupId); return found ? found : this.groups[0]; } private getItemsByGroup(groupId: number): SettingItem[] { return this.items.filter((item: SettingItem) => item.groupId === groupId); } private isSwitchOn(key: string): boolean { if (key === 'notify') { return this.notifyEnabled; } if (key === 'autoSave') { return this.autoSaveEnabled; } if (key === 'darkMode') { return this.darkModeEnabled; } return false; } private toggleSwitch(key: string) { if (key === 'notify') { this.notifyEnabled = !this.notifyEnabled; } else if (key === 'autoSave') { this.autoSaveEnabled = !this.autoSaveEnabled; } else if (key === 'darkMode') { this.darkModeEnabled = !this.darkModeEnabled; } } private handleAction(key: string) { if (key === 'cache') { this.cacheClearedCount += 1; } } @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 HeaderPanel() { Column({ space: 10 }) { Row({ space: 10 }) { Column({ space: 4 }) { Text('设置页在 Pura X Max 上改成分组布局') .fontSize(this.getTitleSize()) .fontWeight(FontWeight.Bold) .fontColor('#111827') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(this.getModeText()) .fontSize(14) .fontColor('#2F8F83') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .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) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Row({ space: 8 }) { this.PreviewButton('自动', 0) this.PreviewButton('外屏', 430) this.PreviewButton('展开态', 1040) } .width('100%') } .width('100%') } @Builder private GroupBadge(text: string, selected: boolean) { Text(text) .fontSize(11) .fontColor(selected ? '#FFFFFF' : '#2F8F83') .padding({ left: 7, right: 7, top: 3, bottom: 3 }) .backgroundColor(selected ? '#33FFFFFF' : '#E6F4F1') .borderRadius(999) } @Builder private GroupCard(item: SettingGroup) { Column({ space: 8 }) { Row() { Text(item.title) .fontSize(16) .fontWeight(FontWeight.Medium) .fontColor(this.selectedGroupId === item.id ? '#FFFFFF' : '#111827') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Blank() this.GroupBadge(item.badge, this.selectedGroupId === item.id) } .width('100%') Text(item.desc) .fontSize(13) .fontColor(this.selectedGroupId === item.id ? '#DFF5F1' : '#6B7280') .lineHeight(19) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width('100%') .padding(14) .backgroundColor(this.selectedGroupId === item.id ? '#2F8F83' : '#FFFFFF') .borderRadius(20) .border({ width: 1, color: this.selectedGroupId === item.id ? '#2F8F83' : '#E5E7EB' }) .onClick(() => { this.selectedGroupId = item.id; }) } @Builder private GroupPanel() { Column({ space: 14 }) { Column({ space: 4 }) { Text('设置分类') .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor('#111827') Text('先选分类，再看对应设置项') .fontSize(13) .fontColor('#6B7280') } .width('100%') ForEach(this.groups, (item: SettingGroup) => { this.GroupCard(item) }, (item: SettingGroup) => item.id.toString()) } .width('100%') .height('100%') .padding(16) .backgroundColor('#FFFFFF') .borderRadius(26) .shadow({ radius: 12, color: '#10000000', offsetX: 0, offsetY: 4 }) } @Builder private SwitchView(key: string) { Row() { if (this.isSwitchOn(key)) { Blank() Circle() .width(22) .height(22) .fill('#FFFFFF') .margin({ right: 3 }) } else { Circle() .width(22) .height(22) .fill('#FFFFFF') .margin({ left: 3 }) Blank() } } .width(48) .height(28) .backgroundColor(this.isSwitchOn(key) ? '#2F8F83' : '#CBD5E1') .borderRadius(14) .onClick(() => { this.toggleSwitch(key); }) } @Builder private RightContent(item: SettingItem) { if (item.type === 'switch') { this.SwitchView(item.key) } else if (item.type === 'action') { Text(item.value) .fontSize(13) .fontColor('#2F8F83') .padding({ left: 10, right: 10, top: 6, bottom: 6 }) .backgroundColor('#E6F4F1') .borderRadius(999) .onClick(() => { this.handleAction(item.key); }) } else { Text(item.value) .fontSize(13) .fontColor(item.type === 'value' ? '#6B7280' : '#2F8F83') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } } @Builder private SettingRow(item: SettingItem) { Row({ space: 12 }) { Column({ space: 4 }) { Text(item.title) .fontSize(16) .fontWeight(FontWeight.Medium) .fontColor('#111827') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(item.desc) .fontSize(13) .fontColor('#6B7280') .lineHeight(20) .maxLines(this.isExpanded() ? 2 : 3) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .layoutWeight(1) this.RightContent(item) } .width('100%') .padding(15) .backgroundColor('#FFFFFF') .borderRadius(20) .border({ width: 1, color: '#E5E7EB' }) } @Builder private SettingSection(group: SettingGroup) { Column({ space: 12 }) { Row() { Column({ space: 4 }) { Text(group.title) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor('#111827') Text(group.desc) .fontSize(13) .fontColor('#6B7280') } .layoutWeight(1) this.GroupBadge(group.badge, false) } .width('100%') .padding({ left: 4, right: 4 }) ForEach(this.getItemsByGroup(group.id), (item: SettingItem) => { this.SettingRow(item) }, (item: SettingItem) => item.id.toString()) } .width('100%') } @Builder private DetailPanel() { Column({ space: 14 }) { Row() { Column({ space: 4 }) { Text(this.getSelectedGroup().title) .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor('#111827') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(this.getSelectedGroup().desc) .fontSize(13) .fontColor('#6B7280') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .layoutWeight(1) if (this.cacheClearedCount > 0) { Text('清理 ' + this.cacheClearedCount.toString() + ' 次') .fontSize(12) .fontColor('#6B7280') } } .width('100%') .padding({ left: 4, right: 4 }) Scroll() { Column({ space: 12 }) { ForEach(this.getItemsByGroup(this.selectedGroupId), (item: SettingItem) => { this.SettingRow(item) }, (item: SettingItem) => item.id.toString()) } .width('100%') .padding({ bottom: 24 }) } .layoutWeight(1) .width('100%') .edgeEffect(EdgeEffect.Spring) } .width('100%') .height('100%') .padding(18) .backgroundColor('#FFFFFF') .borderRadius(26) .shadow({ radius: 12, color: '#10000000', offsetX: 0, offsetY: 4 }) } @Builder private CompactSettingsList() { Scroll() { Column({ space: 22 }) { ForEach(this.groups, (group: SettingGroup) => { this.SettingSection(group) }, (group: SettingGroup) => group.id.toString()) } .width('100%') .padding({ bottom: 24 }) } .layoutWeight(1) .width('100%') .edgeEffect(EdgeEffect.Spring) } @Builder private MainContent() { if (this.isExpanded()) { Row({ space: this.twoColumnGap }) { Column() { this.GroupPanel() } .width(this.groupPanelWidth) .height('100%') .flexShrink(0) Column() { this.DetailPanel() } .layoutWeight(1) .height('100%') } .width('100%') .height('100%') } else { this.CompactSettingsList() } } build() { Column() { Column({ space: 16 }) { this.HeaderPanel() this.MainContent() } .width(this.getContentWidth()) .height('100%') .padding({ left: this.getPagePadding(), right: this.getPagePadding(), top: 18, bottom: 16 }) } .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; } }) } }