!16449 调整位置设置示例

Merge pull request !16449 from 李娟/location

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md

@@ -32,20 +32,15 @@ struct PositionExample1 {
       Column({ space: 10 }) {
         // 元素内容<元素宽高，设置内容在与元素内的对齐方式
         Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%')
-        Text('top start')
-          .align(Alignment.TopStart)
-          .height(50)
-          .width('90%')
-          .fontSize(16)
-          .backgroundColor(0xFFE4C4)
-
-        Text('Bottom end')
-          .align(Alignment.BottomEnd)
-          .textAlign(TextAlign.End)
-          .height(50)
-          .width('90%')
-          .fontSize(16)
-          .backgroundColor(0xFFE4C4)
+        Stack() {
+          Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C)
+          Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9)
+        }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
+        .align(Alignment.BottomEnd)
+        Stack() {
+          Text('top start')
+        }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
+        .align(Alignment.TopStart)
 
         // 父容器设置direction为Direction.Ltr，子元素从左到右排列
         Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
@@ -87,6 +82,7 @@ struct PositionExample2 {
       Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%')
       Row() {
         Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('2 position(30, 10)')
           .size({ width: '60%', height: '30' })
           .backgroundColor(0xbbb2cb)
@@ -95,6 +91,7 @@ struct PositionExample2 {
           .align(Alignment.Start)
           .position({ x: 30, y: 10 })
         Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('4 position(50%, 70%)')
           .size({ width: '50%', height: '50' })
           .backgroundColor(0xbbb2cb)
@@ -111,14 +108,20 @@ struct PositionExample2 {
           .size({ width: '100', height: '100' })
           .backgroundColor(0xdeb887)
         Text('text')
+          .fontSize('30px')
+          .textAlign(TextAlign.Center)
           .size({ width: 25, height: 25 })
           .backgroundColor(Color.Green)
           .markAnchor({ x: 25, y: 25 })
         Text('text')
+          .fontSize('30px')
+          .textAlign(TextAlign.Center)
           .size({ width: 25, height: 25 })
           .backgroundColor(Color.Green)
           .markAnchor({ x: -100, y: -25 })
         Text('text')
+          .fontSize('30px')
+          .textAlign(TextAlign.Center)
           .size({ width: 25, height: 25 })
           .backgroundColor(Color.Green)
           .markAnchor({ x: 25, y: -25 })
@@ -128,6 +131,7 @@ struct PositionExample2 {
       Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%')
       Row() {
         Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('2  offset(15, 30)')
           .size({ width: 120, height: '50' })
           .backgroundColor(0xbbb2cb)
@@ -136,6 +140,7 @@ struct PositionExample2 {
           .align(Alignment.Start)
           .offset({ x: 15, y: 30 })
         Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('4 offset(-10%, 20%)')
           .size({ width: 100, height: '50' })
           .backgroundColor(0xbbb2cb)