#鸿蒙通关秘籍#如何设计一个左右地址交换的UI结构？

在设计一个左右地址交换的UI结构时，可以遵循以下步骤：

1. 为地址文本创建 Row 布局，通过此可以将两个 Text 组件排列在一行：

   Row() {
     Text($r('app.string.address_exchange_address_left'))
       .translate({ x: this.translateX })
       .width($r('app.string.address_exchange_address_width'))
       .textAlign(this.swap ? TextAlign.End : TextAlign.Start)
     ...
     Text($r('app.string.address_exchange_address_right'))
       .translate({ x: -this.translateX })
       .width($r('app.string.address_exchange_address_width'))
       .textAlign(this.swap ? TextAlign.Start : TextAlign.End)
     ...
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.

   复制

2. 将中间的交换按钮放置在 Stack 中，可以在按钮上添加图标以提升视觉效果：

   Stack() {
     Image($r('app.media.address_exchange_airplane'))
       .size({
           height: $r('app.integer.address_exchange_airplane_size'),
           width: $r('app.integer.address_exchange_airplane_size')
       })
     Image($r('app.media.address_exchange_recycle'))
       .size({
           height: $r('app.integer.address_exchange_recycle_size'),
           width: $r('app.integer.address_exchange_recycle_size')
       })
       .rotate({ angle: this.rotateAngle })
       .animation({
           curve: Curve.EaseOut,
           playMode: PlayMode.Normal,
       })
   }
     .width($r('app.string.address_exchange_image_width'))
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.

   复制