diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index f860a751b5d7a6c6c0e7bdcb7350b0a6dc590e56..f513523443f42d8038c2fc34ed5d3d4d40e1129a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -88,7 +88,7 @@ caretPosition(value: number): void ``` @Entry @Component -struct TextAreaExample2 { +struct TextAreaExample1 { @State text: string = '' build() { Column() { @@ -123,7 +123,7 @@ struct TextAreaExample2 { ``` @Entry @Component -struct TextAreaTest { +struct TextAreaExample2 { controller: TextAreaController = new TextAreaController() build() { Column() { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 2a45556e43462bb6fdf754427eb01529fbcbc52f..279471bbf8ae99a48673addb5fd64e17c2f1a760 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -100,7 +100,7 @@ caretPosition(value: number): void ``` @Entry @Component -struct TextAreaExample2 { +struct TextInputExample1 { @State text: string = '' build() { @@ -134,7 +134,7 @@ struct TextAreaExample2 { ``` @Entry @Component -struct TextInputTest { +struct TextInputExample2 { @State text: string = '' controller: TextInputController = new TextInputController() build() { diff --git a/zh-cn/application-dev/ui/ui-js-components-grid.md b/zh-cn/application-dev/ui/ui-js-components-grid.md index df6ac362e27ccc48685834c47b544d60b45779a5..ec3fd8941309b8b4208f9acd495072d3dd5b61d1 100644 --- a/zh-cn/application-dev/ui/ui-js-components-grid.md +++ b/zh-cn/application-dev/ui/ui-js-components-grid.md @@ -1,4 +1,4 @@ -# Grid +# 栅格布局 栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/arkui-js/js-components-grid-container.md)。 diff --git a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md index 1b7edd1205710adc65fd787f04aceacdf96ec4ad..57345d1720c689f987851f8dd69df2a8814eb9bd 100644 --- a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md +++ b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md @@ -433,7 +433,7 @@ ``` @Component struct ContentTable { - @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) { + @Builder IngredientItem(title:string, name: string, value: string) { Flex() { Text(title) .fontSize(17.4) @@ -531,6 +531,6 @@ 针对创建简单视图，有以下示例工程可供参考： -- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView) +- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/BuildCommonView) 本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。 diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md index 8223e2a771379d0441519ee0ad3515ff6b0ae67b..e32f4b0b2c140bd70006b4e0fdb2879812fadcfc 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md @@ -12,25 +12,25 @@ ## 栅格系统 -栅格系统有Columns、Margins、Gutters三个概念。 +栅格系统有Column、Margin、Gutter三个概念。 ![zh-cn_image_0000001217236574](figures/zh-cn_image_0000001217236574.png) -1. Gutters： +1. Gutter： 用来控制元素与元素之间距离关系。可以根据设备的不同尺寸，定义不同的gutter值，作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。 -2. Margins： +2. Margin： 离栅格容器边缘的距离。可以根据设备的不同尺寸，定义不同的margin值，作为栅格布局的统一规范。 -3. Columns: +3. Column: 栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。 ### 系统栅格断点 -系统根据不同水平宽度设备对应Columns的数量关系，形成了一套断点规则定义。 +系统根据不同水平宽度设备对应Column的数量关系，形成了一套断点规则定义。 -系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下： +系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(column)，边距（margin)，间隔(gutter)定义如下： | 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin | @@ -48,7 +48,7 @@ 通过接口`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。 -- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp： +- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp： ``` GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} @@ -60,7 +60,7 @@ GridContainer() {} ``` - 上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。 + 上述例子中，默认在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列与列的间隔为24vp，两侧边距是32vp。 - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如： diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md index 2bbcf5679d0b4aaa1c9e93c1c39641191da1df4f..380a6b8a0713c0d77c96ee464f05c153cb8700ff 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md @@ -15,11 +15,11 @@ 首先导入媒体查询模块，例如： ``` - import mediaquery from '@ohos.mediaquery' +import mediaquery from '@ohos.mediaquery' ``` 然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如： ``` - listener = mediaquery.matchMediaSync('(orientation: landscape)') +listener = mediaquery.matchMediaSync('(orientation: landscape)') ``` 最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如： ``` @@ -39,13 +39,13 @@ listener.on('change', onPortrait) ``` 例如： -screen and (round-screen: true) // 当设备屏幕是圆形时条件成立 +`screen and (round-screen: true)` ：当设备屏幕是圆形时条件成立 -(max-height: 800) // 当高度小于800时条件成立 +`(max-height: 800)` ：当高度小于800时条件成立 -(height <= 800) // 当高度小于800时条件成立 +`(height <= 800) ` ：当高度小于800时条件成立 -screen and (device-type: tv) or (resolution < 2) // 包含多个媒体特征的多条件复杂语句查询 +`screen and (device-type: tv) or (resolution < 2)` ：包含多个媒体特征的多条件复杂语句查询 ### 媒体类型(media-type) diff --git a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md index 826fdd6f5c0db8f423d9ec0b2f85d6a53ff5c43e..7aaf302a3043f9699a41bd37517bc2b8c5fec6d0 100644 --- a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md +++ b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md @@ -267,6 +267,6 @@ 针对页面布局与连接，有以下示例工程可供参考： -- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection) +- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection) 本示例构建了食物分类列表页面和食物详情页，向开发者展示了List布局、Grid布局以及页面路由的基本用法。