动态显示页面布局以及页面元素大小实现案例

//图片所在首行的高度 
@State firstRowHeight : string = '10%' 
@State imgColWidth : number = 85; 
//图片大小设为等宽等高  方便设置圆形图片  以及  后面等比例放大缩小 
@State imgWidthHeight : number = 65;   
//两段文字的大小 
@State textColMargin : number = 100; 
@State textSize1 : number = 30; 
@State textSize2 : number = 16; 
@State text2Opacity : number = 1; 
@State text2MarginLeft : number = 0; 
@State text2MarginTop : number = 0; 
//第二段文字是否消失 
@State text2IsAppear : boolean = true;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

//层叠布局，用来隐藏其他不必展示的组件 
Stack({ alignContent: Alignment.Start }) { 
  Column() { 
    Image($r('app.media.1013_1')) 
      .width(this.imgWidthHeight) 
      .height(this.imgWidthHeight) 
      .borderRadius(30) 
  } 
  .width(this.imgColWidth) 
  .height('100%') 
  .zIndex(1) 
  .alignItems(HorizontalAlign.Start) 
  .justifyContent(FlexAlign.Center) 
  //这层组件必须要背景色，否则Stack层叠布局会暴露该组件Z轴反向下面的其他组件 
  .backgroundColor(Color.Green) 
  .margin({ 
    left: 15 
  }) 
 
 
  Column() { 
    Text('老六') 
      .fontSize(this.textSize1) 
    if (this.text2IsAppear) { 
      Text('老八背英语学前辅导') 
        .fontSize(this.textSize2) 
        .opacity(this.text2Opacity) 
        .fontWeight(400) 
        .margin({ 
          left: this.text2MarginLeft, 
          top: this.text2MarginTop 
        }) 
    } 
  } 
  .margin({ 
    left: this.textColMargin 
  }) 
  .width(200) 
  .height('100%') 
  .alignItems(HorizontalAlign.Start) 
  .justifyContent(FlexAlign.Center) 
}
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.

.scroller = new Scroller(); 
.onScroll(() => {方法内容}）
1.
2.