希望提供一键切换首页视频列表单列展示和双列展示的实现方式

@Entry 
@Component 
struct GridExample1 { 
  @State numbers: string[] = [] 
  @State inputValue: string = 'click me' 
  @State columnsTemplateStr: string = '2fr 2fr' 
  @State widthNum: string = '50%' 
 
  aboutToAppear() { 
 
    for (let i = 1; i <= 5; i++) { 
      this.numbers.push(i + '') 
    } 
  } 
 
  build() { 
    Column({ space: 5 }) { 
 
      Button(this.inputValue) 
        .onClick(() => { 
          if (this.columnsTemplateStr == '2fr' && this.widthNum == '100%') { 
            this.columnsTemplateStr = '2fr 2fr' 
            this.widthNum = '50%' 
          } else { 
            this.columnsTemplateStr = '2fr' 
            this.widthNum = '100%' 
          } 
        }).backgroundColor(0x317aff) 
      Grid() { 
        ForEach(this.numbers, (day: string) => { 
          GridItem() { 
            Text(day) 
              .fontSize(16) 
              .backgroundColor(0xF9CF93) 
              .width(this.widthNum)// .width(130) 
              .height(80) 
              .textAlign(TextAlign.Center) 
          } 
          .selected(true) 
          .hitTestBehavior(HitTestMode.Transparent) 
          .onTouch((event?: TouchEvent) => { 
            console.log(`dzy>onTouch>item: ${day}, event.type: ${event.type}`) 
          }) 
        }) 
      } 
      // .columnsTemplate('2fr 2fr') 
      .columnsTemplate(this.columnsTemplateStr) 
      .columnsGap(10) 
      .rowsGap(10) 
      .width('90%') 
      .backgroundColor(0xFAEEE0) 
      .height('100%') 
      .multiSelectable(true) 
    }.width('100%').margin({ top: 5 }) 
  } 
}
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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.