五、组件的多层布局 原创

.position({
        x:100,
        y:60
       })
      .zlndex(1)
1.
2.
3.
4.
5.

Stack({
  alignContent:Alignment.XXX	//层叠布局组件在父组件中的位置
}){
  Item1
  Item2
  Item3		//越往下显示层级越高,也可用zIndex()手动调整组件的显示级
}
1.
2.
3.
4.
5.
6.
7.

import { colorSpaceManager } from '@kit.ArkGraphics2D';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Column(){
      //层叠布局组件Stack
      Stack({
        //alignContent: Alignment.xxx枚举  层叠布局组件在父组件中的位置
        alignContent: Alignment.Top
      }){
        Text('Item1')
          .backgroundColor(Color.Pink)
          .width(200)
          .height(200)
        Text('Item2')
          .backgroundColor(Color.Blue)
          .width(120)
          .height(120)
        Text('Item3')
          .backgroundColor(Color.Yellow)
          .width(80)
          .height(80)
      }
      .width(300)
      .height(400)
      .backgroundColor(Color.Green)
    }
    .padding(50)
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
  }
}
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.

@Entry
@Component
struct Index {
  build() {
    Column() {
      //Badge角标组件,Badge({这里写角标参数}){这里写要显示角标的组件}
        Badge({
          //角标数字
          count:1,
          //角标显示位置
          position:BadgePosition.RightTop,
          //角标样式
          style:{
            fontSize:14,
            badgeSize:20,
            badgeColor:'#fa2a2d'
          }
        }){
          //拥有这个角标的组件
          Image($r('app.media.img_04'))
            .width('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.

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
    }
    .width(200)
    .height(200)
    .backgroundColor(Color.Pink)
    .margin(20)
    .borderRadius({ topLeft: 8, topRight: 8 })
      //come here
    .stateStyles({
      //按压改变组件大小
      pressed: {
        .width(300)
      },
      //点击改变组件大小
      clicked: {
        .width(300)
      }
    })
  }
}
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.

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
    }
    .width(200)
    .height(200)
    .backgroundColor(Color.Pink)
    .margin(20)
    .borderRadius({ topLeft: 8, topRight: 8 })
    .stateStyles({
      //按压改变组件大小
      pressed: {
        .width(300)
      },
    })
    //添加动画属性, 参数是一个对象
    .animation({
      duration:1500,  //动画时长
      curve:Curve.FastOutSlowIn,  //设置动画曲线
      delay :500, //动画延迟时间
      iterations:2  //动画重复次数
    })
    //添加了animation后有没有动画还要确认,初始值或默认值有没有变化

  }
}
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.

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Image($r('app.media.img_4'))
          .width(200)
          .stateStyles({
            normal: {
              .translate({x: 0,y:50})
            },
            pressed: {
              .translate({x: 120})
            }
          })
          .animation({
            curve: Curve.EaseInOut
          })
      }
      .padding(20)
      }
      .width('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.

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Image($r('app.media.img_4'))
          .width(20)
          .stateStyles({
            normal: {
              .scale({x:1,y:1})
            },
            pressed: {
              // .scale({x: 10,y:10})
              .scale({x: 1.1,y:1.1,centerX:100})
            }
          })
          .animation({
            curve: Curve.EaseInOut
          })
      }
      .padding(20)
      .justifyContent(FlexAlign.End)
      .backgroundColor(Color.Pink)
      }
      .width('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.

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(200)
        .aspectRatio(1)
        .stateStyles({
          normal: {
            .rotate({angle: 0})
          },
          pressed: {
            .rotate({angle: 60})
          }
        })
        .animation({
          curve: curves.springMotion()
        })
    }
    .padding(20)
  }
}
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.