HarmonyOS 如何点击让两个view展开，收起

HarmonyOS

put_get

2024-12-25 08:41:59

3213浏览

回答 1

按赞同

按时间

Heiang

参考示例如下：

import { curves, window } from '@kit.ArkUI';
@Entry
@Component
struct PageAnimationTwoRow {
  @State isExpand: boolean = false;

  aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then((win) => {
      win.setPreferredOrientation(window.Orientation.LANDSCAPE)
    })
  }

  build() {
    Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Row() {
        Text("颜色")
        Text(this.isExpand ?
          `点
击
收
起`:
          `查
看
词
意`)
          .onClick(() => {
            animateTo({ duration: 500 }, () => {
              this.isExpand = !this.isExpand
            })
          })
          .position({
            left: this.isExpand ? 400 : 200,
            top: 20
          })
          .backgroundColor("#ffe2af5b")
          .fontColor("#fff")
          .padding(5)
          .borderRadius({
            topRight: 10, bottomRight: 10
          })
      }
      .width(200)
      .height(200)
      .backgroundColor("#ffffffff")
      .border({ width: 8, color: "#ffe2a478" })
      .borderRadius(10)
      .zIndex(2)

      Row() {
        Row() {
          Text("Colors")
        }.rotate({
          angle: this.isExpand ? 0 : -2
        })
      }
      .rotate({
        angle: this.isExpand ? 0 : 2
      })
      .width(200)
      .height(200)
      .backgroundColor("#ffffffff")
      .border({ width: 8, color: "#ffe2a478" })
      .borderRadius(10)
      .margin({ left: this.isExpand ? -0 : -200 })
      .zIndex(1)
      .animation({
        duration: 500
      })
    }.width("100%").height("100%").backgroundColor("#ffe7d5a5").padding(10)
  }
}
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.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.