diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/align.png b/zh-cn/application-dev/reference/arkui-ts/figures/align.png index ffabc26d3ee59984dda6cb375f8b18bb319b4fc7..5cdeb7cfd622b90a6fe52ef8cc94f187847d05b7 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/align.png and b/zh-cn/application-dev/reference/arkui-ts/figures/align.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index 0d45dd44fa69d301a79b00b16ca5810ac4496e3f..9781bc28bc9c6a2d561c5e7814a366a8ba0be8ad 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/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)