HarmonyOS 7 两个 ContainerReader 并排右侧为什么宽度为 0layoutWeight 才是关键在 API 26 的横向Flex中放两个ContainerReader本想让左右内容各占一半结果第一个铺满整行第二个几乎看不见。这个现象容易被误判成容器断点没有更新。实际先要查的是父容器如何分配剩余宽度官方文档明确说明多个ContainerReader作为同级子组件时默认按书写顺序由第一个占满剩余空间其余组件的主轴大小可能是 0。本文只讨论两个同级容器争用剩余空间的情况。下面用同一组布局分别复现和修复方便直接对照。案例一两个容器都没有权重后一个消失在 DevEco Studio 26.0.0 的 API 26 工程中新建页面把下面代码放进去。这里给父容器明确宽高排除父级尺寸不确定的干扰。import { ContainerReader, Size } from kit.ArkUI; Entry Component struct TwoReadersWithoutWeight { State leftSize: Size { width: 0, height: 0 }; State rightSize: Size { width: 0, height: 0 }; State leftBp: WidthBreakpoint WidthBreakpoint.WIDTH_MD; State rightBp: WidthBreakpoint WidthBreakpoint.WIDTH_MD; build() { Flex({ direction: FlexDirection.Row }) { ContainerReader({ size: this.leftSize!!, widthBreakpoint: this.leftBp!! }) { Text(左侧 ${this.leftSize.width}vp).width(100%) } .backgroundColor(#DBF5EA) ContainerReader({ size: this.rightSize!!, widthBreakpoint: this.rightBp!! }) { Text(右侧 ${this.rightSize.width}vp).width(100%) } .backgroundColor(#FFE1D9) } .width(100%) .height(240) } }观察点不是“屏幕宽度够不够”而是rightSize.width和红色区域是否有可见宽度。按照官方描述第一个 Reader 先拿走剩余空间第二个主轴宽度为 0。不要试图修改rightSize来给它分配宽度size是读取布局结果的双向绑定状态不是设置容器尺寸的入口。案例二固定侧栏之外两块内容平分改成左侧固定 100vp两个 Reader 都设layoutWeight(1)。关键是两个都设置而且用两个独立的尺寸状态不能让两个 Reader 共享同一个Size对象。import { ContainerReader, Size } from kit.ArkUI; Entry Component struct TwoReadersWithWeight { State firstSize: Size { width: 0, height: 0 }; State secondSize: Size { width: 0, height: 0 }; State firstBp: WidthBreakpoint WidthBreakpoint.WIDTH_MD; State secondBp: WidthBreakpoint WidthBreakpoint.WIDTH_MD; build() { Flex({ direction: FlexDirection.Row }) { Column() { Text(导航) } .width(100) .height(100%) .backgroundColor(#E8E9E7) ContainerReader({ size: this.firstSize!!, widthBreakpoint: this.firstBp!! }) { Text(主列表 ${this.firstSize.width}vp) } .layoutWeight(1) .backgroundColor(#DDF3E8) ContainerReader({ size: this.secondSize!!, widthBreakpoint: this.secondBp!! }) { Text(详情 ${this.secondSize.width}vp) } .layoutWeight(1) .backgroundColor(#D6E9FF) } .width(100%) .height(240) } }示意图以 900vp 的父容器为例侧栏先占 100vp剩下 800vp 按 1:1 分给两个 Reader各 400vp。实际数值还会受父容器内边距、间距和设备窗口宽度影响不应把 400vp 写进业务断言。我们真正要验证的是两个值都大于 0且在同权重、无额外宽度约束时接近相等。为什么用权重而不是给每块写死 400vp做法窄窗口或分屏时容器断点能否反映真实局部尺寸两块固定宽度容易溢出或被压缩能反映结果但布局本身不弹性只给第二块设权重第一块仍可能抢走空间容易继续出现一侧为 0两块都设layoutWeight(1)跟随剩余空间均分两块分别回写自己的尺寸与断点这也解释了ContainerReader与窗口断点的区别同一个窗口里侧栏、主列表、详情的局部可用宽度可以完全不同。主列表的列数应按它自己的容器尺寸决定而不是拿窗口总宽度推断。排查顺序与验证边界先确认父Flex有明确宽高官方要求容器尺寸不要反过来依赖子节点决定。确认size、widthBreakpoint使用各自的State并以!!双向绑定不加!!会失去回写。检查同级固定宽度组件先占走多少空间再看 Reader 是否都设置了权重。在 API 26 真机或模拟器中切换全屏、窄窗口、分屏观察两块实际宽度是否均为正并检查断点随各自容器变化。本文的布局规则、接口与边界已按华为 2026-09-09 更新的官方指南核对文中的 900/100/400vp 是解释性算例。当前没有将上述 ArkTS 工程在 API 26 SDK 和真机上编译运行因此不把示意计算写成设备实测结论。复现时请以两组页面的可见结果和Size回写值为准。官方依据容器断点 ContainerReader 开发指南。