#HarmonyOS NEXT 体验官# 鸿蒙开发之--同一个布局效果多种实现方式原创

wx6192ef9117955

发布于 2024-8-1 13:02

浏览

0收藏

作者：江南
前言：在生活中，我们从家到公司，可以采用乘坐公交车、地铁、骑车、自驾车等多种交通方式，那么在鸿蒙开发过程中，对于同一种布局效果，我们是否可以有类似的思路呢？答案是有的。接下来，我们通过实例来一一学习并且证明。

我们要实现的目标效果如图：

#HarmonyOS NEXT 体验官# 鸿蒙开发之--同一个布局效果多种实现方式-鸿蒙开发者社区

方式一

分析：第一行：是text1和text2，第二行：是text3和text4，所以我们很自然的想起，外层是一个Column，Column里边包含两个Row，每个Row里边包含两个Text，分析好了之后，我们按照思路，写出代码：

build() {
    Column() {
      Row(){
        Text('text1').width(100).height(100)
          .id("text1").fontSize(20).fontColor(Color.Black).backgroundColor(Color.Red)
        Text('text2').width(100).height(100)
          .id("text2").fontSize(20).fontColor(Color.Black).backgroundColor(Color.Yellow)
      }
      Row(){
        Text('text3').width(100).height(100)
          .id("text3").fontSize(20).fontColor(Color.Black).backgroundColor(Color.Green)
        Text('text4').width(100).height(100)
          .id("text4").fontSize(20).fontColor(Color.Black).backgroundColor(Color.Blue)
      }
    }.alignItems(HorizontalAlign.Start)
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Grey)
  }

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

方式二

分析：页面的左上角是text1，text1的右侧是text2，text1的正下方是text3，text4在text2的下方并且在text3的右侧。分析好了之后，RelativeContainer符合我们的思路，我们按照思路，写出代码：

build() {
    RelativeContainer() {
      Text('text1').width(100).height(100)
        .id("text1").fontSize(20).fontColor(Color.Black).backgroundColor("#FF3333")
      Text('text2').width(100).height(100)
        .id("text2").fontSize(20).fontColor(Color.Black).backgroundColor(Color.Yellow)
        .alignRules({
          left:{anchor:'text1',align:HorizontalAlign.End}
        })
      Text('text3').width(100).height(100)
        .id("text3").fontSize(20).fontColor(Color.Black).backgroundColor(Color.Green)
        .alignRules({
          top:{anchor:'text1',align:VerticalAlign.Bottom}
        })
      Text('text4').width(100).height(100)
        .id("text4").fontSize(20).fontColor(Color.Black).backgroundColor(Color.Blue)
        .alignRules({
          top:{anchor:'text2',align:VerticalAlign.Bottom},
          left:{anchor:'text3',align:HorizontalAlign.End},
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Grey)
  }
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.

解析：
1.RelativeContainer内部子view不做设置的情况下，默认在左上角。
2.anchor：是参照物锚点的id，align：是对应锚点的位置。比如
left:{anchor:‘text1’,align:HorizontalAlign.End}意思就是，在text1的横向尾部为最其左侧。

方式三

分析：页面的左上角是text1，text1宽高都是100px，text2的最左边在页面左上角向右的100px处，text3的最上边在页面左上角先下的100px处，text4的最左边在页面左上角向右的100px处并且最上边在页面左上角先下的100px处。分析好了之后，我们按照思路，Stack符合分析的思路，写出代码：

build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Text('Text1').width('100')
        .height('100').backgroundColor(Color.Red)
      Text('Text2')
        .width('100').height('100')
        .backgroundColor(Color.Yellow).margin({left:100})
      Text('Text3')
        .width('100').height('100')
        .backgroundColor(Color.Green).margin({top:100})
      Text('Text4')
        .width('100').height('100')
        .backgroundColor(Color.Orange).margin({top:100,left:100})
    }.width('100%').height(300).margin({ top: 5 }) .backgroundColor(Color.Grey)
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

区别

方式一是两层布局，方式二和方式三是单层布局，嵌套的层级比方式一少，当方式一的思路可能更直接点。

总结

正所谓“条条大路通罗马”，在开发过程中也是一样的，只要我们多思考，多分析，多积累，遇到实际问题时，总会有一种方案是最合适的，加油~小伙伴们！

分类

HarmonyOS

ArkUI / eTS

标签

鸿蒙开发

已于2024-8-1 14:19:04修改

51CTO

51CTO博客

51CTO学堂

#HarmonyOS NEXT 体验官# 鸿蒙开发之--同一个布局效果多种实现方式原创

我们要实现的目标效果如图：

方式一

方式二

方式三

区别

总结

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#HarmonyOS NEXT 体验官# 鸿蒙开发之--同一个布局效果多种实现方式 原创

我们要实现的目标效果如图：

方式一

方式二

方式三

区别

总结

目录

订阅鸿蒙技术特刊，精选内容抢先看

#HarmonyOS NEXT 体验官# 鸿蒙开发之--同一个布局效果多种实现方式原创