From 2fd3a96f9c04c4cb9e57c62422771e505f3183fb Mon Sep 17 00:00:00 2001 From: sienna1128 Date: Fri, 21 Oct 2022 17:31:31 +0800 Subject: [PATCH] update docs Signed-off-by: sienna1128 --- zh-cn/application-dev/ui/ui-ts-layout-flex.md | 144 +++++++++--------- .../ui/ui-ts-layout-grid-container-new.md | 4 +- 2 files changed, 74 insertions(+), 74 deletions(-) diff --git a/zh-cn/application-dev/ui/ui-ts-layout-flex.md b/zh-cn/application-dev/ui/ui-ts-layout-flex.md index 92783b661f..0921f7a67a 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md @@ -467,87 +467,87 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 ### 弹性布局的自适应拉伸 在弹性布局父组件尺寸不够大的时候，通过子组件的下面几个属性设置其再父容器的占比，达到自适应布局能力。 -1. flexBasis: 设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置或者为auto，那子项的空间为width/height的值。 - -```ts -Flex() { - Text('flexBasis("auto")') - .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽松 - .height(100) - .backgroundColor(0xF5DEB3) - Text('flexBasis("auto")'+' width("40%")') - .width('40%') - .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值 - .height(100) - .backgroundColor(0xD2B48C) - - Text('flexBasis(100)') // 未设置width以及flexBasis值为100，宽度为100vp - .flexBasis(100) - .height(100) - .backgroundColor(0xF5DEB3) - - Text('flexBasis(100)') - .flexBasis(100) - .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp - .height(100) - .backgroundColor(0xD2B48C) -}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) -``` - -![](figures/flexbasis.png) - -2. flexGrow: 设置父容器的剩余空间分配给此属性所在组件的比例。用于"瓜分"父组件的剩余空间。 - -```ts -Flex() { - Text('flexGrow(1)') - .flexGrow(2) - .width(100) - .height(100) - .backgroundColor(0xF5DEB3) +- flexBasis: 设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置或者为auto，那子项的空间为width/height的值。 - Text('flexGrow(3)') - .flexGrow(2) - .width(100) - .height(100) - .backgroundColor(0xD2B48C) + ```ts + Flex() { + Text('flexBasis("auto")') + .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽松 + .height(100) + .backgroundColor(0xF5DEB3) + Text('flexBasis("auto")'+' width("40%")') + .width('40%') + .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值 + .height(100) + .backgroundColor(0xD2B48C) + + Text('flexBasis(100)') // 未设置width以及flexBasis值为100，宽度为100vp + .flexBasis(100) + .height(100) + .backgroundColor(0xF5DEB3) + + Text('flexBasis(100)') + .flexBasis(100) + .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp + .height(100) + .backgroundColor(0xD2B48C) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + ``` + + ![](figures/flexbasis.png) - Text('no flexGrow') - .width(100) - .height(100) - .backgroundColor(0xF5DEB3) -}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) -``` +- flexGrow: 设置父容器的剩余空间分配给此属性所在组件的比例。用于"瓜分"父组件的剩余空间。 -![](figures/flexgrow.png) + ```ts + Flex() { + Text('flexGrow(1)') + .flexGrow(2) + .width(100) + .height(100) + .backgroundColor(0xF5DEB3) + + Text('flexGrow(3)') + .flexGrow(2) + .width(100) + .height(100) + .backgroundColor(0xD2B48C) + + Text('no flexGrow') + .width(100) + .height(100) + .backgroundColor(0xF5DEB3) + }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) + ``` + + ![](figures/flexgrow.png) 上图中，父容器宽度400vp, 三个子组件原始宽度为100vp，综合300vp，剩余空间100vp根据flexGrow值的占比分配给子组件，未设置flexGrow的子组件不参与“瓜分”。 第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp*2/5=140vp，第二个元素为100vp+100vp*3/5=160vp。 -3. flexShrink: 当父容器空间不足时，子组件的压缩比例。 +- flexShrink: 当父容器空间不足时，子组件的压缩比例。 -```ts -Flex({ direction: FlexDirection.Row }) { - Text('flexShrink(3)') - .flexShrink(3) - .width(200) - .height(100) - .backgroundColor(0xF5DEB3) + ```ts + Flex({ direction: FlexDirection.Row }) { + Text('flexShrink(3)') + .flexShrink(3) + .width(200) + .height(100) + .backgroundColor(0xF5DEB3) + + Text('no flexShrink') + .width(200) + .height(100) + .backgroundColor(0xD2B48C) - Text('no flexShrink') - .width(200) - .height(100) - .backgroundColor(0xD2B48C) - - Text('flexShrink(2)') - .flexShrink(2) - .width(200) - .height(100) - .backgroundColor(0xF5DEB3) -}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) -``` - -![](figures/flexshrink.png) + Text('flexShrink(2)') + .flexShrink(2) + .width(200) + .height(100) + .backgroundColor(0xF5DEB3) + }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) + ``` + + ![](figures/flexshrink.png) ## 场景示例 diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md index d2066deedd..c7346b6212 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md @@ -1,7 +1,7 @@ # 栅格布局 栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md) -相对于[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。 +相对于[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)提供了更灵活、更全面的栅格系统实现方案。GridRow为栅格容器组件，只与栅格子组件GridCol在栅格布局场景中使用。 ## 栅格容器GridRow @@ -14,7 +14,7 @@ - breakpoints：以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。 -首次通过设置断点位置，得到一系列断点区间；其次，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，进而可以调整应用的布局，实现栅格布局。 +首先通过设置断点，得到一系列断点区间；然后，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，最后调整应用的布局。 ### 栅格系统断点 -- GitLab