HarmonyOS UI布局问题

@Entry 
@Component 
struct Index { 
  @State flag: boolean = true; 
 
  build() { 
    Column() { 
      Button('图片显隐').onClick(()=>{ 
        this.flag = !this.flag 
      }) 
      Flex() { 
        Row(){ 
          Text('文字文字文字文字文字为你做字文字文字为你做字文字文字为你做字文字文字为你做') 
            .fontSize(24) 
            // .textOverflow({ overflow: TextOverflow.Ellipsis}) 
            // .maxLines(2) 
            .fontColor(Color.White) 
        } 
        .width('100%') 
        .backgroundColor(Color.Gray) 
        if(this.flag){ 
          Image($r('app.media.startIcon')) 
            .width(40) 
        } 
      } 
      .width(300) 
      .backgroundColor(Color.Red) 
    } 
    .height('100%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.