如何实现内容下拉变化？

【问题描述】组件开发过程中经常遇到组件堆叠，上层组件下拉，下层组件随之变化的场景。常见的如朋友圈背景的下拉放大，内容的下拉刷新等。如何实现上述下拉变化的场景?【运行环境】ROM: 3.2 Beta5； API 9

## 效果呈现
效果图如下：

## 运行环境
本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：
- IDE: DevEco Studio 3.1 Beta2
- SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)

## 实现思路
本例的3个关键特性及实现方案如下：
- 界面不同背景的展示：通过Stack堆叠容器实现界面之间的覆盖
- 中间子组件的下拉和回弹：通过ontouch事件判断heightValue的大小去设置可滑动的中层组件的动画效果
- 底层子组件的文本变化：判断heightValuede来决定文本的变化

## 开发步骤
1. 通过Stack堆叠容器创建各层子组件和文本
    具体代码块如下：

1. ```ts
   
2.     // 底层子组件
   
3.     ...
   
4.     Stack({ alignContent: Alignment.Bottom }) {
   
5.       build() {
   
6.         Stack({ alignContent: Alignment.Bottom }) { //底部对齐
   
7.           Column() {
   
8.             Row() {
   
9.               Image($r('app.media.back')).width(25).height(25)
   
10.                 .onClick(() => {
    
11.                   router.back();
    
12.                 })
    
13.             ...
    
14.             Image($r("app.media.sharew")) //分享
    
15.                 .width(25)
    
16.                 .height(25)
    
17.             Image($r('app.media.more')) //更多
    
18.                 .width(25)
    
19.                 .height(25)
    
20.             }.width('100%').padding(20).margin({ top: 20 })
    
21.             ...
    
22.           }
    
23.           .height(this.ImHeight)
    
24.           .width(this.ImWidth)
    
25.           .backgroundImage($r('app.media.images')) //底层背景图
    
26.           .backgroundImageSize(ImageSize.Cover)
    
27.         ...
    
28.         }
    
29.       }
    
30.     }
    
31.     ...
    
32.     //中层子组件
    
33.     ...
    
34.       Column() {
    
35.         Row() {
    
36.           Text('当点击此场景卡片时：').fontSize(16)
    
37.           Blank()
    
38.           Image($r('app.media.bl_harm')).width(30).height(30)
    
39.         }.width('100%').margin({ top: 10, left: 10, right: 10, bottom: 20 })
    
40.       }.borderRadius(35)
    
41.     ...
    
42.     //颜色渲染，线性渐变
    
43.         .linearGradient(
    
44.           {
    
45.             direction: GradientDirection.Top,
    
46.             angle: 180,
    
47.             colors: [['#c7e2eb', 0.01], ["#F7F7F7", 0.05], ["#F7F7F7", 1]]
    
48.           })
    
49.     //底层子组件  
    
50.     ...
    
51.     Column() {
    
52.       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
    
53.         Button({ type: ButtonType.Capsule, stateEffect: true }) {
    
54.           Row() {
    
55.             Text('查看更多').fontSize(16).fontColor(Color.Blue).margin({ left: 5, right: 12 })
    
56.           }.alignItems(VerticalAlign.Center)
    
57.         }.height(40).borderRadius(25).backgroundColor('#EBEBEB').width('45%')
    
58.         Button({ type: ButtonType.Capsule, stateEffect: true }) {
    
59.           Row() {
    
60.             Text('执行').fontSize(16).fontColor(Color.Blue).margin({ left: 5, right: 12 })
    
61.           }.alignItems(VerticalAlign.Center)
    
62.         }.height(40).borderRadius(25).backgroundColor('#EBEBEB').width('45%')
    
63.       }
    
64.     }.height('10%').width('100%').align(Alignment.Top).backgroundColor('#F7F7F7')
    
65.     ...   
    
66.     ```
    

复制代码

2.  通过ontouch事件判断heightValue的大小去设置可滑动的中层组件的动画效果
    具体代码块如下：

1. ```ts
   
2.     ...
   
3.     .onTouch((event: TouchEvent) => { //触摸事件
   
4.       if (event.type === TouchType.Down) {
   
5.         this.duration = 1000;
   
6.       }
   
7.       if (event.type === TouchType.Up) { // 结束，回弹,回弹动画更快
   
8.         this.heightValue = '88%'
   
9.         this.duration = 500;
   
10.         this.ImHeight = "100%"
    
11.         this.ImWidth = "100%"
    
12.       }
    
13.       if (event.type === TouchType.Move) {
    
14.       // 根据滑动距离确定组件高度，最多拖动140的，此时组件最小高度为68%
    
15.         if (event.touches[0].y <= 140) {
    
16.           this.heightValue = 88 - event.touches[0].y / 7 + '%'
    
17.           this.ImHeight = "200%"
    
18.           this.ImWidth = "200%"
    
19.         } else {
    
20.           this.heightValue = '68%'
    
21.         }
    
22.       }
    
23.       console.info('垂直方向滑动距离' + event.touches[0].y)
    
24.     })
    
25.     .height(this.heightValue)
    
26.     .animation({
    
27.       duration: this.duration, // 动画时长
    
28.       curve: Curve.FastOutSlowIn, // 动画曲线
    
29.       delay: 0, // 动画延迟
    
30.       iterations: 1, // 播放次数
    
31.       playMode: PlayMode.Normal // 动画模式
    
32.     })
    
33.    
    
34.     ```
    

复制代码

3. 判断可滑动的中层组件的高度变化来体现标题栏的变化
    具体代码块如下：

1. ```ts
   
2.     ...
   
3.     Row(){
   
4.       //可滑动的组件高度大于整体界面的70%，显示test1
   
5.       Text(this.heightValue >= '70%' ? 'test1' : '')
   
6.         .fontColor(Color.Black)
   
7.         .fontSize(20)
   
8.         .margin({ left: 5 })
   
9.     }   
   
10.     ...
    
11.     Row() {
    
12.       Text(this.heightValue < '70%' ? 'test2' : '') //可滑动的组件高度小于于整体界面的70%，显示test2
    
13.         .fontColor(Color.Red)
    
14.         .fontSize(30)
    
15.         .margin({ left: 5 })
    
16.     }
    
17.     ...
    
18.     ```
    

复制代码

## 完整代码
示例完整代码如下：

1. ```ts
   
2. import router from '@ohos.router'
   
3. 
   
4. @Entry
   
5. @Component
   
6. struct DetailExample {
   
7.   @State heightValue: string = '88%'
   
8.   @State duration: number = 1000
   
9.   @State ImHeight: string = '100%'
   
10.   @State ImWidth: string = '100%'
    
11. 
    
12.   build() {
    
13.     Stack({ alignContent: Alignment.Bottom }) {
    
14.       // 底层子组件
    
15.       Column() {
    
16.         Row() {
    
17.           Image($r('app.media.back')).width(25).height(25)
    
18.             .onClick(() => {
    
19.               router.back();
    
20.             })
    
21.           Text(this.heightValue >= '70%' ? 'test1' : '')         
    
22.             .fontColor(Color.Black)
    
23.             .fontSize(20)
    
24.             .margin({ left: 5 })
    
25.           Blank()
    
26.           Image($r("app.media.sharew"))
    
27.             .width(25)
    
28.             .height(25)
    
29.           Image($r('app.media.more'))
    
30.             .width(25)
    
31.             .height(25)
    
32.         }.width('100%').padding(20).margin({ top: 20 })
    
33. 
    
34.         Row() {
    
35.           Text(this.heightValue < '70%' ? 'test2' : '')
    
36.             .fontColor(Color.Red)
    
37.             .fontSize(30)
    
38.             .margin({ left: 5 })
    
39.         }
    
40.         .width("100%")
    
41.         .height(35)
    
42.         .alignItems(VerticalAlign.Center)
    
43.         .justifyContent(FlexAlign.Start)
    
44.       }
    
45.       .height(this.ImHeight)
    
46.       .width(this.ImWidth)
    
47.       .backgroundImage($r('app.media.images'))
    
48.       .backgroundImageSize(ImageSize.Cover)
    
49. 
    
50.       // 可拖动中层子组件，动画，圆弧
    
51.       Column() {
    
52.         Row() {
    
53.           Text('当点击此场景卡片时：').fontSize(16)
    
54.           Blank()
    
55.           Image($r('app.media.bl_harm')).width(30).height(30)
    
56.         }.width('100%').margin({ top: 10, left: 10, right: 10, bottom: 20 })
    
57.       }.borderRadius(35)
    
58.       .padding(20)
    
59.       .onTouch((event: TouchEvent) => {
    
60.         if (event.type === TouchType.Down) {
    
61.           this.duration = 1000;
    
62.         }
    
63.         if (event.type === TouchType.Up) {
    
64.           this.heightValue = '88%'
    
65.           this.duration = 500;
    
66.           this.ImHeight = "100%"
    
67.           this.ImWidth = "100%"
    
68.         }
    
69.         if (event.type === TouchType.Move) {
    
70.           if (event.touches[0].y <= 140) {
    
71.             this.heightValue = 88 - event.touches[0].y / 7 + '%'
    
72.             this.ImHeight = "200%"
    
73.             this.ImWidth = "200%"
    
74.           } else {
    
75.             this.heightValue = '68%'
    
76.           }
    
77.         }
    
78.         console.info('垂直方向滑动距离' + event.touches[0].y)
    
79.       })
    
80.       .height(this.heightValue)
    
81.       .animation({
    
82.         duration: this.duration,
    
83.         curve: Curve.FastOutSlowIn,
    
84.         delay: 0,
    
85.         iterations: 1,
    
86.         playMode: PlayMode.Normal
    
87.       })
    
88.       .linearGradient(
    
89.         {
    
90.           direction: GradientDirection.Top,
    
91.           angle: 180,
    
92.           colors: [['#c7e2eb', 0.01], ["#F7F7F7", 0.05], ["#F7F7F7", 1]]
    
93.         })
    
94. 
    
95.       // 最上层子组件
    
96.       Column() {
    
97.         Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
    
98.           Button({ type: ButtonType.Capsule, stateEffect: true }) {
    
99.             Row() {
    
100.               Text('查看更多').fontSize(16).fontColor(Color.Blue).margin({ left: 5, right: 12 })
     
101.             }.alignItems(VerticalAlign.Center)
     
102.           }
     
103.           .height(40).borderRadius(25).backgroundColor('#EBEBEB').width('45%')
     
104.           Button({ type: ButtonType.Capsule, stateEffect: true }) {
     
105.             Row() {
     
106.               Text('执行').fontSize(16).fontColor(Color.Blue).margin({ left: 5, right: 12 })
     
107.             }.alignItems(VerticalAlign.Center)
     
108.           }
     
109.           .height(40).borderRadius(25).backgroundColor('#EBEBEB').width('45%')
     
110.         }
     
111.       }.height('10%').width('100%').align(Alignment.Top).backgroundColor('#F7F7F7')
     
112.     }
     
113.   }
     
114. }
     
115. ```
     

复制代码

[Stack堆叠容器](https://gitee.com/openharmony/do ... -container-stack.md)

[Toggle](https://gitee.com/openharmony/do ... omponents-toggle.md)

[Flex](https://gitee.com/openharmony/do ... s-container-flex.md)