diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ListDivider.png b/zh-cn/application-dev/reference/arkui-ts/figures/ListDivider.png deleted file mode 100644 index 1842303447e7fbd1c9a59cd14dccd7a23eb42636..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/ListDivider.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md index ca748359ecfedfdccc02d7de409cd925cd765282..981b1dac65ef09d51faf3ddfa4e0be3f109dc9ac 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -89,7 +89,13 @@ struct ButtonExample { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Text('Normal button').fontSize(9).fontColor(0xCCCCCC) Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { - Button('OK', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) + Button('OK', { type: ButtonType.Normal, stateEffect: true }) + .borderRadius(8) + .backgroundColor(0x317aff) + .width(90) + .onClick(() => { + console.log('ButtonType.Normal') + }) Button({ type: ButtonType.Normal, stateEffect: true }) { Row() { LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 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 841748e13e542cc41c8e4ba01308c2b28ccf6812..c90a981f22824983ca9bb52e1f2c48cb04e00211 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 @@ -29,7 +29,7 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle | direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 | | wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。
**说明：**
在多行布局时，通过交叉轴方向，确认新行堆叠方向。 | | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 所有子组件在Flex容器主轴上的对齐格式。 | -| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | 否 | ItemAlign.Start | 所以子组件在Flex容器交叉轴上的对齐格式。 | +| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | 否 | ItemAlign.Start | 所有子组件在Flex容器交叉轴上的对齐格式。 | | alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 3aada9151e8f1584403809919ec3ea7722075db9..cb421e2028a2be500c338acb9ed57fe7ff0f9342 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -48,7 +48,7 @@ Grid(scroller?: Scroller) | rowsTemplate | string | 设置当前网格布局行的数量，不设置时默认1行。
例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
**说明：**
设置为'0fr'，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。 | | columnsGap | [Length](ts-types.md#length) | 设置列与列的间距。
默认值：0
**说明：**
设置为小于0的值时，按默认值显示。 | | rowsGap | [Length](ts-types.md#length) | 设置行与行的间距。
默认值：0
**说明：**
设置为小于0的值时，按默认值显示。 | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
**说明：**
API version 9及以下版本默认值为BarState.Off，API version 10的默认值为BarState.Auto。 | | scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | | scrollBarWidth | string \| number | 设置滚动条的宽度。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。
默认值：4
单位：vp | | cachedCount | number | 设置预加载的GridItem的数量，只在[LazyForEach](../../quick-start/arkts-rendering-control.md#数据懒加载)中生效。具体使用可参考[减少应用白块说明](../../ui/ui-ts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
**说明：**
设置缓存后会在Grid显示区域上下各缓存cachedCount*列数个GridItem。
[LazyForEach](../../quick-start/arkts-rendering-control.md#数据懒加载)超出显示和缓存范围的GridItem会被释放。
设置为小于0的值时，按默认值显示。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index a3612ac4c429c5f009e3d3fa7917a49d83d6dbfa..70ae80329702e2e31459add03ff2ff5c7fe0df0e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -53,7 +53,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? | -------- | -------- | -------- | | listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。
默认值：Axis.Vertical
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#resourcecolor),
startMargin?: Length,
endMargin?: Length
} \| null | 设置ListItem分割线样式，不支持设置百分比，默认无分割线。
- strokeWidth: 分割线的线宽。
- color: 分割线的颜色。
- startMargin: 分割线与列表侧边起始端的距离。
- endMargin: 分割线与列表侧边结束端的距离。
从API version 9开始，该接口支持在ArkTS卡片中使用。
endMargin +startMargin 不能超过列宽度。
startMargin和endMargin不支持设置百分比。
List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。
多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。 | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
API version 9及以下版本默认值为BarState.Off，API version 10的默认值为BarState.Auto。 | | cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量，只在[LazyForEach](../../quick-start/arkts-rendering-control.md#数据懒加载)中生效，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/ui-ts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。
多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 | | editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。
默认值：false | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果，支持弹簧效果和阴影效果。
默认值：EdgeEffect.Spring
从API version 9开始，该接口支持在ArkTS卡片中使用。 | @@ -218,69 +218,3 @@ struct ListLanesExample { ``` ![list](figures/list1.gif) - -```ts -// xxx.ets -@Entry -@Component -struct ListDividerTest { - private arr: number[] = [0, 1, 2, 3] - - @Builder header() { - Text('header') - .width('100%') - .height(50) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xFFEECC) - } - - @Builder footer() { - Text('footer') - .width('100%') - .height(40) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xFFEECC) - } - - @Builder item(index: number) { - Text('item' + index) - .width('100%').height(80) - .fontSize(16) - .textAlign(TextAlign.Center) - } - - build() { - Column() { - List() { - ForEach(this.arr, (item) => { - ListItem() { - this.item(item) - } - }, item => item) - ListItemGroup({ header: this.header, footer: this.footer }) { - ForEach(this.arr, (item) => { - ListItem() { - this.item(item) - } - }, item => item) - } - .divider({ strokeWidth: 2, color: Color.Red, startMargin: 20, endMargin: 10 }) - - ForEach(this.arr, (item) => { - ListItem() { - this.item(item) - } - }, item => item) - } - .lanes(2) - .divider({ strokeWidth: 2, color: Color.Red, startMargin: 20, endMargin: 10 }) - .margin(10).borderWidth(1) - }.width("100%") - .height("100%") - } -} -``` - -![ListDivider](figures/ListDivider.png) \ No newline at end of file