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

Question

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

Answer 1

参考示例如下：

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