diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index bc1fe6a19615251c6845f3bbc5e270954a72381e..3d90dcdf8e2042616bf2f4934171aac191f55245 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -101,7 +101,6 @@ - [ColumnSplit](ts-container-columnsplit.md) - [Counter](ts-container-counter.md) - [Flex](ts-container-flex.md) - - [FlowItem](ts-container-flowitem.md) - [GridCol](ts-container-gridcol.md) - [GridRow](ts-container-gridrow.md) - [Grid](ts-container-grid.md) @@ -121,7 +120,6 @@ - [Swiper](ts-container-swiper.md) - [Tabs](ts-container-tabs.md) - [TabContent](ts-container-tabcontent.md) - - [WaterFlow](ts-container-waterflow.md) - 媒体组件 - [Video](ts-media-components-video.md) - 绘制组件 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif b/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif deleted file mode 100644 index dd8d0f1a9f9a786de94abf348130c526ecb09641..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/imageAnimator.gif b/zh-cn/application-dev/reference/arkui-ts/figures/imageAnimator.gif index 9686185c04ef6c0a764fa7fcb91b8270d503f79d..aa023c33fc6335b746d1e36eee2d9b55dc48cc1a 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/imageAnimator.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/imageAnimator.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/loadProgress.jpeg b/zh-cn/application-dev/reference/arkui-ts/figures/loadProgress.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..141bc03c7528681e90fc3ed91b4c05611355e092 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/loadProgress.jpeg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif b/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif index 03c2354e7cab3ad876f70e1c46ec1c05e437de95..258957a3effd7b53b3adde928b4a50848f08f9ad 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textstyle.png b/zh-cn/application-dev/reference/arkui-ts/figures/textstyle.png index 38128cb5f1a6aa7a36a3b4e483bf2815c7170117..babd8a3e221a628927e8f760126d625e9f395066 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/textstyle.png and b/zh-cn/application-dev/reference/arkui-ts/figures/textstyle.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/transform.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/transform.PNG index a840e7050d1ae79179722dd9f23e4f383d1db2ec..9dff892b65a37c26514e9ebe925d200a75d7eee7 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/transform.PNG and b/zh-cn/application-dev/reference/arkui-ts/figures/transform.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/waterflow.gif b/zh-cn/application-dev/reference/arkui-ts/figures/waterflow.gif deleted file mode 100644 index 8c4010c17b302a8617508bbeb037a0dddf220882..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/waterflow.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000111864201.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000111864201.gif deleted file mode 100644 index 24702d37d233b9f10a83e4e36b8c8ff23393014f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000111864201.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264366.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264366.png index f27757afb281875f5cd4fca0e4b86684cdf0f1a8..212290aaf09896bef738026b0c519eb9b5d21de2 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264366.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264366.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.PNG new file mode 100644 index 0000000000000000000000000000000000000000..854d21cc4692e51e8eac70f5644f4362a58ee640 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.gif deleted file mode 100644 index 791930fb1f2f681dac85167f646dbcf88d121882..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422906.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.PNG new file mode 100644 index 0000000000000000000000000000000000000000..0a8168a0a1041188a2a090bd380c2a9f5f6306a7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.gif deleted file mode 100644 index 1be92ae9b4a61f304b91c5b03f7b0e799ac679fa..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582854.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.PNG new file mode 100644 index 0000000000000000000000000000000000000000..3bcd5aa32b3ae31928a9691864fa792a9733b162 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.gif deleted file mode 100644 index 8da8a4adcc50c16eafb2378f0bbab0706471ae8b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744189.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png index 5855095851b92058f270d69a46546db43ec974b8..17a7767c1f69c12ccfb0c1436110a9e22b848c26 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif index 4edf113bcfe487f1b10ddd123dfdbb3ab612af92..83ba2889028efdc09a1f8529d53ec03022fda5d7 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index 43fe09091edccbe1e9d8703d256d1ed0a28ac945..bd6e43e74d9b0ee77b2eed2ffdca8526cd4e8cba 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -70,38 +70,19 @@ struct ImageAnimatorExample { ImageAnimator() .images([ { - src: $r('app.media.img1'), - duration: 500, - width: 170, - height: 120, - top: 0, - left: 0 + src: $r('app.media.img1') }, { - src: $r('app.media.img2'), - duration: 500, - width: 170, - height: 120, - top: 0, - left: 170 + src: $r('app.media.img2') }, { - src: $r('app.media.img3'), - duration: 500, - width: 170, - height: 120, - top: 120, - left: 170 + src: $r('app.media.img3') }, { - src: $r('app.media.img4'), - duration: 500, - width: 170, - height: 120, - top: 120, - left: 0 + src: $r('app.media.img4') } ]) + .duration(2000) .state(this.state).reverse(this.reverse).fixedSize(false) .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240) .margin({ top: 100 }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index abad3103f7e525eba3beb9e9d6f4d9163b8950b9..d52eaf34dbfe8a77bebb67e3e18f43238e35644a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -41,4 +41,4 @@ struct LoadingProgressExample { } ``` -![zh-cn_image_000000111864201](figures/zh-cn_image_000000111864201.gif) +![loadProgress](figures/loadProgress.jpeg) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md index 92b69ccb79cf84d7033c67052aaf286020368d7f..162f15f8f3645a41808ef0ad7dfca5a20077aa87 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md @@ -20,3 +20,61 @@ NavRouter() | 名称 | 功能描述 | | ---------------------------------------- | ---------------------------------------- | | onStateChange(callback: (isActivated: boolean) => void) | 组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。
**说明：** 用户点击NavRouter，激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)；NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。 | + +## 示例 + +```ts +// xxx.ets +@Entry +@Component +struct NavRouterExample { + private arr: number[] = [0, 1, 2, 3] + @State isActive: boolean = false + @State dex: number = 0 + + build() { + Column() { + Navigation() { + List({ space: 12, initialIndex: 0 }) { + ForEach(this.arr, (item: number, index: number) => { + ListItem() { + NavRouter() { + Row() { + Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) + Text(`NavRouter${item + 1}`) + .fontSize(22) + .fontWeight(500) + .textAlign(TextAlign.Center) + } + .width(180) + .height(72) + .backgroundColor(this.dex === index ? '#ccc' : '#fff') + .borderRadius(24) + + NavDestination() { + Text(`我是NavDestination第${item + 1}页内容`).fontSize(50) + Flex({ direction: FlexDirection.Row }) { + Row() { + Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 }) + Text('今天共有七节课').fontSize(30) + }.padding({ left: 15 }) + } + }.backgroundColor('#ccc') + .title(`NavDestination${item + 1}`) + }.onStateChange((isActivated: boolean) => { + this.dex = index + }) + } + }, item => item) + } + .height('100%') + .margin({ top: 12, left: 12 }) + } + .mode(NavigationMode.Split) + .hideTitleBar(true) + .hideToolBar(true) + }.height('100%') + } +} +``` + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md index d760fd4e4108b59cbc51164f0ee5ba4ffc9d3425..5d75e95d46cf426c88e71511beb0ff61e63bed42 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md @@ -122,7 +122,6 @@ struct StepperExample { .itemTextStyle() }.itemStyle() } - .nextLabel('Finish') } .backgroundColor('#F1F3F5') .onFinish(() => { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md index b04c09c7804046cfdce174a35b9291371f34ffaa..a84a7661022605f7663d75f9134c1317ebe0fca0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md @@ -96,7 +96,7 @@ struct FlexExample1 { } ``` -![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif) +![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.PNG) ```ts // xxx.ets @@ -142,7 +142,7 @@ struct FlexExample2 { } ``` -![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png) +![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.PNG) ```ts // xxx.ets @@ -191,7 +191,7 @@ struct FlexExample3 { } ``` -![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif) +![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.PNG) ```ts // xxx.ets @@ -289,4 +289,4 @@ struct FlexExample5 { } ``` -![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.gif) +![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.PNG) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-flowitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-flowitem.md deleted file mode 100644 index 2c2ed70cdd5e019db511e5235305e5fd2b91b67d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-flowitem.md +++ /dev/null @@ -1,31 +0,0 @@ -# FlowItem - - -[瀑布流组件](ts-container-waterflow.md)的子组件，用来展示瀑布流具体item。 - - -> **说明：** -> -> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 子组件 - - -支持单个子组件。 - - -## 接口 - -FlowItem() - -使用该接口来创建瀑布流子组件。 - - -## 属性 - -无 - -## 示例 - -详见[瀑布流组件示例](ts-container-waterflow.md#示例)。 \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md deleted file mode 100644 index 388a78aad718f534728d8ade84fb8e0fdf9434a9..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md +++ /dev/null @@ -1,291 +0,0 @@ -# WaterFlow - - -瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。 - - -> **说明：** -> -> 该组件从API Version 9 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 子组件 - - -包含[FlowItem](ts-container-flowitem.md)子组件。 - - -## 接口 - - -WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller}) - -**参数：** - -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ---------- | ----------------------------------------------- | ------ | -------------------------------------------- | -| footer | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置WaterFlow尾部组件。 | -| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器，与可滚动组件绑定。
目前瀑布流仅支持Scroller组件的scrollToIndex接口。 | - - -## 属性 - - -除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： - -| 名称 | 参数类型 | 描述 | -| -------- | -------- | -------- | -| columnsTemplate | string | 设置当前瀑布流组件布局列的数量，不设置时默认1列。
例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。并支持[auto-fill](#auto-fill说明)。
默认值：'1fr' | -| rowsTemplate | string | 设置当前瀑布流组件布局行的数量，不设置时默认1行。
例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。并支持[auto-fill](#auto-fill说明)。
默认值：'1fr' | -| itemConstraintSize | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 设置约束尺寸，子组件布局时，进行尺寸范围限制。 | -| columnsGap | Length |设置列与列的间距。
默认值：0| -| rowsGap | Length |设置行与行的间距。
默认值：0| -| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。
默认值：FlexDirection.Column| - -layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况，分为以下三种设置模式: - -- layoutDirection设置纵向布局（FlexDirection.Column 或 FlexDirection.ColumnReverse） - - 此时columnsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。 - -- layoutDirection设置横向布局（FlexDirection.Row 或 FlexDirection.RowReverse） - - 此时rowsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件横向布局，辅轴均分成纵向3列。 - -- layoutDirection未设置布局方向 - - 布局方向为layoutDirection的默认值：FlexDirection.Column，此时columnsTemplate有效。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。 - -## 事件 - - -除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： - - -| 名称 | 功能描述 | -| -------- | -------- | -| onReachStart(event: () => void) | 瀑布流组件到达起始位置时触发。 | -| onReachEnd(event: () => void) | 瀑布流组件到底末尾位置时触发。 | - - -## auto-fill说明 - -WaterFlow的columnsTemplate、rowsTemplate属性的auto-fill仅支持以下格式： - -```css -repeat(auto-fill, track-size) -``` - -其中repeat、auto-fill为关键字。track-size为行高或者列宽，支持的单位包括px、vp、%或有效数字，track-size至少包括一个有效行高或者列宽。 - - -## 示例 - - -```ts -// WaterFlowDataSource.ets - -// 实现IDataSource接口的对象，用于瀑布流组件加载数据 -export class WaterFlowDataSource implements IDataSource { - - private dataArray: number[] = [] - private listeners: DataChangeListener[] = [] - - constructor() { - for (let i = 0; i < 100; i++) { - this.dataArray.push(i) - } - } - - // 获取索引对应的数据 - public getData(index: number): any { - return this.dataArray[index] - } - - // 通知控制器数据重新加载 - notifyDataReload(): void { - this.listeners.forEach(listener => { - listener.onDataReloaded() - }) - } - - // 通知控制器数据增加 - notifyDataAdd(index: number): void { - this.listeners.forEach(listener => { - listener.onDataAdded(index) - }) - } - - // 通知控制器数据变化 - notifyDataChange(index: number): void { - this.listeners.forEach(listener => { - listener.onDataChanged(index) - }) - } - - // 通知控制器数据删除 - notifyDataDelete(index: number): void { - this.listeners.forEach(listener => { - listener.onDataDeleted(index) - }) - } - - // 通知控制器数据位置变化 - notifyDataMove(from: number, to: number): void { - this.listeners.forEach(listener => { - listener.onDataMoved(from, to) - }) - } - - // 获取数据总数 - public totalCount(): number { - return this.dataArray.length - } - - // 注册改变数据的控制器 - registerDataChangeListener(listener: DataChangeListener): void { - if (this.listeners.indexOf(listener) < 0) { - this.listeners.push(listener) - } - } - - // 注销改变数据的控制器 - unregisterDataChangeListener(listener: DataChangeListener): void { - const pos = this.listeners.indexOf(listener) - if (pos >= 0) { - this.listeners.splice(pos, 1) - } - } - - // 增加数据 - public Add1stItem(): void { - this.dataArray.splice(0, 0, this.dataArray.length) - this.notifyDataAdd(0) - } - - // 在数据尾部增加一个元素 - public AddLastItem(): void { - this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length) - this.notifyDataAdd(this.dataArray.length-1) - } - - // 在指定索引位置增加一个元素 - public AddItem(index: number): void { - this.dataArray.splice(index, 0, this.dataArray.length) - this.notifyDataAdd(index) - } - - // 删除第一个元素 - public Delete1stItem(): void { - this.dataArray.splice(0, 1) - this.notifyDataDelete(0) - } - - // 删除第二个元素 - public Delete2ndItem(): void { - this.dataArray.splice(1, 1) - this.notifyDataDelete(1) - } - - // 删除最后一个元素 - public DeleteLastItem(): void { - this.dataArray.splice(-1, 1) - this.notifyDataDelete(this.dataArray.length) - } - - // 重新加载数据 - public Reload(): void { - this.dataArray.splice(1, 1) - this.dataArray.splice(3, 2) - this.notifyDataReload() - } -} -``` - -```ts -// WaterflowDemo.ets -import { WaterFlowDataSource } from './WaterFlowDataSource' - -@Entry -@Component -struct WaterflowDemo { - @State minSize: number = 50 - @State maxSize: number = 100 - @State fontSize: number = 24 - @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F] - scroller: Scroller = new Scroller() - datasource: WaterFlowDataSource = new WaterFlowDataSource() - private itemWidthArray: number[] = [] - private itemHeightArray: number[] = [] - - // 计算flow item宽/高 - getSize() { - let ret = Math.floor(Math.random() * this.maxSize) - return (ret > this.minSize ? ret : this.minSize) - } - - // 保存flow item宽/高 - getItemSizeArray() { - for (let i = 0; i < 100; i++) { - this.itemWidthArray.push(this.getSize()) - this.itemHeightArray.push(this.getSize()) - } - } - - aboutToAppear() { - this.getItemSizeArray() - } - - @Builder itemFoot() { - Column() { - Text(`Footer`) - .fontSize(10) - .backgroundColor(Color.Red) - .width(50) - .height(50) - .align(Alignment.Center) - .margin({ top: 2 }) - } - } - - build() { - Column({ space: 2 }) { - WaterFlow({ footer: this.itemFoot, scroller: this.scroller }) { - LazyForEach(this.datasource, (item: number) => { - FlowItem() { - Column() { - Text("N" + item).fontSize(12).height('16') - Image('res/waterFlowTest(' + item % 5 + ').jpg') - .objectFit(ImageFit.Fill) - } - } - .width(this.itemWidthArray[item]) - .height(this.itemHeightArray[item]) - .backgroundColor(this.colors[item % 5]) - }, item => item) - } - .columnsTemplate("1fr 1fr 1fr 1fr") - .itemConstraintSize({ - minWidth: 0, - maxWidth: '100%', - minHeight: 0, - maxHeight: '100%' - }) - .columnsGap(10) - .rowsGap(5) - .onReachStart(() => { - console.info("onReachStart") - }) - .onReachEnd(() => { - console.info("onReachEnd") - }) - .backgroundColor(0xFAEEE0) - .width('100%') - .height('80%') - .layoutDirection(FlexDirection.Column) - } - } -} -``` - -![zh-cn_image_WaterFlow.gif](figures/waterflow.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index b55a9ffd0de75708aedc6af8994dceb6ff85430d..1b3ebdef17e3e5b66396fac00b0cdef9c0fc5f49 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -74,9 +74,8 @@ struct PathExample { .width('90%') // 绘制一条长900px，宽3vp的直线 Path() - .width(300) .height(10) - .commands('M0 0 L900 0') + .commands('M0 0 L600 0') .stroke(Color.Black) .strokeWidth(3) @@ -85,55 +84,43 @@ struct PathExample { .fontColor(0xCCCCCC) .width('90%') // 绘制直线图形 - Row({ space: 20 }) { + Flex({ justifyContent: FlexAlign.SpaceBetween }) { Path() - .width(100) - .height(100) - .commands('M150 0 L300 300 L0 300 Z') + .commands('M100 0 L200 240 L0 240 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() - .width(100) - .height(100) - .commands('M0 0 H300 V300 H0 Z') + .commands('M0 0 H200 V200 H0 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() - .width(100) - .height(100) - .commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') + .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) - }.width('100%') + }.width('95%') Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%') // 绘制弧线图形 - Row({ space: 20 }) { + Flex({ justifyContent: FlexAlign.SpaceBetween }) { Path() - .width(100) - .height(100) - .commands("M0 300 S150 0 300 300 Z") + .commands("M0 300 S100 0 240 300 Z") .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() - .width(100) - .height(100) - .commands('M0 150 C0 150 150 0 300 150 L150 300 Z') + .commands('M0 150 C0 100 140 0 200 150 L100 300 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) Path() - .width(100) - .height(100) - .commands('M0 200 A30 20 20 0 0 250 200 Z') + .commands('M0 100 A30 20 20 0 0 200 100 Z') .fillOpacity(0) .stroke(Color.Black) .strokeWidth(3) - } + }.width('95%') }.width('100%') .margin({ top: 5 }) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md index 2ab47f602bcda04b3f577036774cfa86fb7ebaf1..40d6c195f2c13689d5c15a94514ae805b939f0ea 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md @@ -24,9 +24,9 @@ struct Index { @Builder MenuBuilder() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button('Test ContextMenu1') - Divider().strokeWidth(2).margin(5) + Divider().strokeWidth(2).margin(5).color(Color.Black) Button('Test ContextMenu2') - Divider().strokeWidth(2).margin(5) + Divider().strokeWidth(2).margin(5).color(Color.Black) Button('Test ContextMenu3') } .width(200) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md index bc7115c31ae1c215eb12669c0b8ccc875cbdd78e..4456cfc244f8a907d3e2f306e935dd840d28d08d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md @@ -36,46 +36,6 @@ ## 示例 -```ts -// xxx.ets -@Entry -@Component -struct Index { - @State outSetValue: number = 40 - - build() { - Row() { - Column() { - Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) - .borderImage({ - source: $r('app.media.heart'), - slice: `${this.outSetValue}%`, - width: `${this.outSetValue}px`, - outset: '5px', - repeat: RepeatMode.Repeat, - fill: false - }) - Slider({ - value: this.outSetValue, - min: 0, - max: 100, - style: SliderStyle.OutSet - }) - .margin({ top: 30 }) - .onChange((value: number, mode: SliderChangeMode) => { - this.outSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) - }) - } - .width('100%') - } - .height('100%') - } -} -``` - -![zh-cn_image_borderImage](figures/borderImage.gif) - ```ts // xxx.ets diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md index 86660cec308c85cb96f356972f8b34b69a3eb850..5fb5468e9a67be8d63c19ce5f20c7057a542527f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md @@ -55,6 +55,7 @@ struct AspectRatioExample { Text(item) .backgroundColor(0xbbb2cb) .fontSize(40) + .height(160) .aspectRatio(1.5) } }, item => item) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index 7147691fa04e476bfbc23c9d900d7dc80d4c2387..5491d40f9dabbf8166d19255f7e1723d23dae0bc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -30,30 +30,24 @@ struct TextStyleExample { build() { Column({ space: 5 }) { Text('default text') - Divider() Text('text font color red').fontColor(Color.Red) - Divider() Text('text font default') Text('text font size 10').fontSize(10) Text('text font size 10fp').fontSize('10fp') Text('text font size 20').fontSize(20) - Divider() Text('text font style Italic').fontStyle(FontStyle.Italic) - Divider() Text('text fontWeight bold').fontWeight(700) Text('text fontWeight lighter').fontWeight(FontWeight.Lighter) - Divider() Text('red 20 Italic bold text') .fontColor(Color.Red) .fontSize(20) .fontStyle(FontStyle.Italic) .fontWeight(FontWeight.Bold) - Divider() Text('Orange 18 Normal text') .fontColor(Color.Orange) @@ -64,4 +58,4 @@ struct TextStyleExample { } ``` -![textstyle](figures/textstyle.png) +![textstyle](figures/textstyle.PNG) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md index 33cfcba164e7b09d9a4f44c64cd94a0592620cb5..2c9869a9dce1c8dc8f81791848d0a7293b516d43 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md @@ -31,13 +31,13 @@ struct TransformExample { Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) Row() .rotate({ - x: 1, - y: 1, + x: 0, + y: 0, z: 1, centerX: '50%', centerY: '50%', angle: 300 - }) // 组件以矢量(1,1,1)为旋转轴，绕中心点顺时针旋转300度 + }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度 .width(100).height(100).backgroundColor(0xAFEEEE) Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14) diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218419614.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218419614.png index 101f60e44760d98db7a904189f387e2b3557cf32..6cb1dfdc2eedeb82fb0b32df1f2de8c73df08e85 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218419614.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218419614.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218579606.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218579606.png index c8697767f19ae5cc5f7b30c4cbc2a23ffafb0844..42537bbffe87c2972e3130bf5ccc5fc6b055757a 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218579606.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218579606.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218739566.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218739566.png index 4384ea3a2997c4417eee0fbe0e6475c4925b5c36..c5c7e29232e4f468c34faf3f521f594f6ef322bf 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218739566.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218739566.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263019457.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263019457.png index dea13c34b80626c7fe1a0036afbe69d5f236910c..ee5931a95991c672e1b4812d9fa62541e2f8a880 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263019457.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263019457.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263139409.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263139409.png index 395631e2ed4572806bd93bcdb8ff86486e0b5bdf..77364d35a2c56de8616a2d7ea77c4977b4b3e2bb 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263139409.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263139409.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png index dc4a266c02708116362da21577d5b1e582a011fd..938ded6d0b38dc838159990880c66c4211dd5aaa 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263339459.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263339459.png index 99e18123d53b88779948b34c6c566005d989358b..97bdd1f5dc3bf6100e12e5d830290cdc0ad678a1 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263339459.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263339459.png differ diff --git a/zh-cn/application-dev/ui/ui-ts-animation-feature.md b/zh-cn/application-dev/ui/ui-ts-animation-feature.md index bb6a5b8c7dfc4e5e8810f3f9c855b44ae1c275a8..0cf2558762f927042e50ba2f9088d4342d2983a9 100644 --- a/zh-cn/application-dev/ui/ui-ts-animation-feature.md +++ b/zh-cn/application-dev/ui/ui-ts-animation-feature.md @@ -170,9 +170,11 @@ Path() .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36') .fill(Color.White) + .stroke(Color.Transparent) Path() .commands(this.pathCommands1) .fill('none') + .stroke(Color.Transparent) .linearGradient( { angle: 30, @@ -183,6 +185,7 @@ Path() .commands(this.pathCommands2) .fill('none') + .stroke(Color.Transparent) .linearGradient( { angle: 50, @@ -227,10 +230,10 @@ angle: 180, colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]] }) - } + } } ``` - + ![animation-feature](figures/animation-feature.gif) ## 页面转场动画 diff --git a/zh-cn/application-dev/ui/ui-ts-drawing-feature.md b/zh-cn/application-dev/ui/ui-ts-drawing-feature.md index 86f201351613b31444ad6752600088fd570c78a6..909dcf6cd812a7ef61d84de7ddb96847871e04a1 100644 --- a/zh-cn/application-dev/ui/ui-ts-drawing-feature.md +++ b/zh-cn/application-dev/ui/ui-ts-drawing-feature.md @@ -217,10 +217,11 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 ![drawing-feature4](figures/drawing-feature4.png) - 填充颜色为白色。 + 填充颜色为白色，线条颜色为透明。 ```ts .fill(Color.White) + .stroke(Color.Transparent) ``` ```ts @@ -233,6 +234,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 Path() .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36') .fill(Color.White) + .stroke(Color.Transparent) } .height('630px') .width('630px') @@ -256,6 +258,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 Path() .commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z') .fill('none') + .stroke(Corlor.Transparent) .linearGradient( { angle: 30, @@ -276,6 +279,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 Path() .commands(this.pathCommands1) .fill('none') + .stroke(Color.Transparent) .linearGradient( { angle: 30, @@ -303,10 +307,12 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 Path() .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36') .fill(Color.White) + .stroke(Color.Transparent) Path() .commands(this.pathCommands1) .fill('none') + .stroke(Color.Transparent) .linearGradient( { angle: 30, @@ -317,6 +323,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 Path() .commands(this.pathCommands2) .fill('none') + .stroke(Color.Transparent) .linearGradient( { angle: 50, @@ -348,33 +355,37 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 @Entry @Component struct Logo { - private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z' - private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z' + private pathCommands1: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z' + private pathCommands2: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z' + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Shape() { Path() .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36') .fill(Color.White) + .stroke(Color.Transparent) Path() .commands(this.pathCommands1) .fill('none') + .stroke(Color.Transparent) .linearGradient( - { - angle: 30, - colors: [["#C4FFA0", 0], ["#ffffff", 1]] - }) + { + angle: 30, + colors: [["#C4FFA0", 0], ["#ffffff", 1]] + }) .clip(new Path().commands(this.pathCommands1)) Path() .commands(this.pathCommands2) .fill('none') + .stroke(Color.Transparent) .linearGradient( - { - angle: 50, - colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]] - }) + { + angle: 50, + colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]] + }) .clip(new Path().commands(this.pathCommands2)) } .height('630px') @@ -383,22 +394,22 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一 Text('Healthy Diet') .fontSize(26) .fontColor(Color.White) - .margin({ top:300 }) + .margin({ top: 300 }) Text('Healthy life comes from a balanced diet') .fontSize(17) .fontColor(Color.White) - .margin({ top:4 }) + .margin({ top: 4 }) } .width('100%') .height('100%') .linearGradient( { angle: 180, - colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]] - }) + colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]] + }) } } ``` - + ![drawing-feature8](figures/drawing-feature8.png) \ No newline at end of file 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 688b4351e1aff824c62a91fe763451eb62b2b6af..d5dfe1915639a2dac23116f8e6b45fe774ad6990 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md @@ -38,7 +38,7 @@ .padding(10) .backgroundColor(0xAFEEEE) ``` - ![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png) + ![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.PNG) - FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。 @@ -54,7 +54,7 @@ .backgroundColor(0xAFEEEE) ``` - ![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png) + ![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.PNG) - FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。 @@ -70,7 +70,7 @@ .backgroundColor(0xAFEEEE) ``` - ![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png) + ![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.PNG) - FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。 @@ -86,7 +86,7 @@ .backgroundColor(0xAFEEEE) ``` - ![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.png) + ![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.PNG) ### 弹性布局换行 @@ -105,7 +105,7 @@ .backgroundColor(0xAFEEEE) ``` - ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png) + ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.PNG) - FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。 @@ -120,7 +120,7 @@ .backgroundColor(0xAFEEEE) ``` - ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png) + ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.PNG) - FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。 @@ -135,7 +135,7 @@ .backgroundColor(0xAFEEEE) ``` - ![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.png) + ![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.PNG) ### 弹性布局对齐方式 @@ -356,7 +356,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 }.width('90%').height(220).backgroundColor(0xAFEEEE) ``` -![](figures/alignself.png) +![alignself](figures/alignself.png) 上例中，Flex容器中alignItems设置交叉轴子组件的对齐方式为居中，子组件自身设置了alignSelf属性的情况，覆盖父组件的alignItem值，表现为alignSelf的定义。 @@ -496,7 +496,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) ``` - ![](figures/flexbasis.png) + ![flexbasis](figures/flexbasis.png) - flexGrow: 设置父容器的剩余空间分配给此属性所在组件的比例。用于"瓜分"父组件的剩余空间。 @@ -508,7 +508,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 .height(100) .backgroundColor(0xF5DEB3) - Text('flexGrow(3)') + Text('flexGrow(2)') .flexGrow(2) .width(100) .height(100) @@ -521,7 +521,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) ``` - ![](figures/flexgrow.png) + ![flexgrow](figures/flexgrow.png) 上图中，父容器宽度400vp, 三个子组件原始宽度为100vp，综合300vp，剩余空间100vp根据flexGrow值的占比分配给子组件，未设置flexGrow的子组件不参与“瓜分”。 第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp*2/5=140vp，第二个元素为100vp+100vp*3/5=160vp。 @@ -549,7 +549,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器 }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) ``` - ![](figures/flexshrink.png) + ![flexshrink](figures/flexshrink.png) ## 场景示例 @@ -584,4 +584,3 @@ struct FlexExample { - [弹性布局（ArkTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts) -- [ArkUI常用布局容器对齐方式（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/LayoutAlignmentDemo)