diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Column.png b/zh-cn/application-dev/reference/arkui-ts/figures/Column.png new file mode 100644 index 0000000000000000000000000000000000000000..90bb7a5557e42ccc9b6509f96f54328d7a27eea1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/Column.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Row.png b/zh-cn/application-dev/reference/arkui-ts/figures/Row.png new file mode 100644 index 0000000000000000000000000000000000000000..6bf426a5f019e76b7b3a0953643988690eb67b1e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/Row.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/row.png b/zh-cn/application-dev/reference/arkui-ts/figures/row.png deleted file mode 100644 index 3b44b9a41cb0fa78afcde81f82e0ad63c90de58d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/row.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md index edf489e104de3ddba40a09bf2226ef3bd149f352..11c5f4e589d4365c5ac41f5555b28993a545b5c5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md @@ -46,6 +46,7 @@ Column\(value:\{space?: Length\}\) + ## 属性 + + + + + +

名称

@@ -68,6 +69,16 @@ Column\(value:\{space?: Length\}\)

justifyContent

+

FlexAlign

+

Start

+

设置子组件在主轴方向上的对齐格式。

+
- HorizontalAlign枚举说明 @@ -104,28 +115,39 @@ Column\(value:\{space?: Length\}\) @Component struct ColumnExample { build() { - Column({ space: 5 }) { - Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column({ space: 5 }) { - Column().width('100%').height(50).backgroundColor(0xAFEEEE) - Column().width('100%').height(50).backgroundColor(0x00FFFF) - }.width('90%').height(107).border({ width: 1 }) - - Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(50).backgroundColor(0xAFEEEE) - Column().width('50%').height(50).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) - - Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(50).backgroundColor(0xAFEEEE) - Column().width('50%').height(50).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 5 }) { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + Column().width('100%').height(30).backgroundColor(0x00FFFF) + }.width('90%').height(100).border({ width: 1 }) + + Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) + + Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('30%').height(30).backgroundColor(0xAFEEEE) + Column().width('30%').height(30).backgroundColor(0x00FFFF) + }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center) + + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('30%').height(30).backgroundColor(0xAFEEEE) + Column().width('30%').height(30).backgroundColor(0x00FFFF) + }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End) }.width('100%').padding({ top: 5 }) } } ``` -![](figures/column.gif) +![](figures/column.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index abfca36c1d7b0816b3a74d86aa4e69fe26143596..aa39b668e83d7a69bbd8381cb2ad63e5f9bd280c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -68,6 +68,16 @@ Row\(value:\{space?: Length\}\) +

justifyContent

+ +

FlexAlign

+ +

Start

+ +

设置子组件在主轴方向上的对齐格式。

+ + + - VerticalAlign枚举说明 @@ -107,26 +117,38 @@ struct RowExample { build() { Column({ space: 5 }) { Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row({ space: 20 }) { - Row().width(150).height(50).backgroundColor(0xAFEEEE) - Row().width(150).height(50).backgroundColor(0x00FFFF) - }.width(321).height(52).border({ width: 1 }) - - Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('50%').height(50).backgroundColor(0xAFEEEE) - Row().width('50%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Bottom).width('90%').height(100).border({ width: 1 }) - - Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('50%').height(50).backgroundColor(0xAFEEEE) - Row().width('50%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Top).width('90%').height(100).border({ width: 1 }) + Row({ space: 5 }) { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').height(107).border({ width: 1 }) + + Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 }) + + Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) + + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) + + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) }.width('100%') } } ``` -![](figures/row.png) +![](figures/Row.png)