HarmonyOS鸿蒙Next中flexGrow自动填充剩余空间的问题，求助

背景知识：

对比 flexGrow 与 layoutWeight

适用场景差异

flexGrow：仅在 Flex 容器中生效，按剩余空间比例分配1。

layoutWeight：支持更广的容器类型（如 Row、Column），按权重分配 整个容器空间。

行为差异

flexGrow 分配的是 剩余空间，而 layoutWeight 分配的是 全部空间（可能压缩其他子组件尺寸）。

问题解决：

代码如下：

import { UserEntity } from "../entity/UserEntity"

export class LeafItem {
    height: number = 50
    color: number = Color.Orange
}

@Component
export struct HomePage {
    @State message: string = "首页"
    @State leafData: Array<LeafItem> =
        [new LeafItem(), new LeafItem(), new LeafItem(), new LeafItem(), new LeafItem()]
    @State showCount: number = 3

    @Builder
    customTitleBar() {
        Row() {
            Text("标题")
                .textAlign(TextAlign.Center)
                .fontSize(20)
                .fontColor(Color.Black)
                .fontWeight(FontWeight.Bold)
                .textAlign(TextAlign.Center)
            Button("+")
                .onClick(() => {
                    this.showCount++;
                })
        }
        .width("100%")
        .justifyContent(FlexAlign.Center)
    }

    aboutToAppear(): void {
        for (let i = 0; i < 5; i++) {
            this.leafData.push(new LeafItem())
        }
    }
    
    build() {
        // 线性布局
        Column() {
            // 标题栏
            this.customTitleBar();
            // 内容区 - 滚动
            List({ space: 0 }) {
                ForEach(this.leafData.slice(0, this.showCount), (item: LeafItem, index: number) => {
                    ListItem() {
                        Row() {
                            Image($r('app.media.ic_friend_sel'))
                                .width(item.height)
                                .height(item.height)
                            Row() {
                                Text(`文案_${index++}`)
                                    .height(item.height)
                            }
                            .backgroundColor(item.color)
                            .margin({ left: 12 })
                            .flexGrow(1)
                            .border({ width: { bottom: 1 }, color: Color.Gray })
                        }
                        .width('100%')
                    }
                    .padding(12)
                    .borderRadius({
                        topLeft: index === 0 ? 16 : 0,
                        topRight: index === 0 ? 16 : 0,
                        bottomLeft: index === this.leafData.length - 1 ? 16 : 0,
                        bottomRight: index === this.leafData.length - 1 ? 16 : 0,
                    })
                    .width('100%')
                    .backgroundColor(Color.White)
                })
            }
            .padding(16)
            .border({ width: 3, color: Color.Red, style: BorderStyle.Dashed })
            .backgroundColor(Color.Pink)
            .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
            // 使用 layoutWeight 替换掉 flexGrow
            // .flexGrow(1)
            .layoutWeight(1)
        }.width('100%')
        .height('100%')
        .backgroundColor(Color.White)
    }
}

真机演示：

使用flexGrow：

使用layoutWeight：

注意：如果楼主一定要使用 flexGrow 属性，那就将顶部的 Column() 替换为 Flex({ direction: FlexDirection.Column })