未验证 提交 9e6ba693 编写于 作者: O openharmony_ci 提交者: Gitee

!3561 DX意见修改

Merge pull request !3561 from LiAn/master
...@@ -88,7 +88,7 @@ caretPosition(value: number): void ...@@ -88,7 +88,7 @@ caretPosition(value: number): void
``` ```
@Entry @Entry
@Component @Component
struct TextAreaExample2 { struct TextAreaExample1 {
@State text: string = '' @State text: string = ''
build() { build() {
Column() { Column() {
...@@ -123,7 +123,7 @@ struct TextAreaExample2 { ...@@ -123,7 +123,7 @@ struct TextAreaExample2 {
``` ```
@Entry @Entry
@Component @Component
struct TextAreaTest { struct TextAreaExample2 {
controller: TextAreaController = new TextAreaController() controller: TextAreaController = new TextAreaController()
build() { build() {
Column() { Column() {
......
...@@ -100,7 +100,7 @@ caretPosition(value: number): void ...@@ -100,7 +100,7 @@ caretPosition(value: number): void
``` ```
@Entry @Entry
@Component @Component
struct TextAreaExample2 { struct TextInputExample1 {
@State text: string = '' @State text: string = ''
build() { build() {
...@@ -134,7 +134,7 @@ struct TextAreaExample2 { ...@@ -134,7 +134,7 @@ struct TextAreaExample2 {
``` ```
@Entry @Entry
@Component @Component
struct TextInputTest { struct TextInputExample2 {
@State text: string = '' @State text: string = ''
controller: TextInputController = new TextInputController() controller: TextInputController = new TextInputController()
build() { build() {
......
# Grid # 栅格布局
栅格布局容器根节点,使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/arkui-js/js-components-grid-container.md) 栅格布局容器根节点,使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/arkui-js/js-components-grid-container.md)
......
...@@ -433,7 +433,7 @@ ...@@ -433,7 +433,7 @@
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
@Builder IngredientItem(title:string, colorValue: string, name: string, value: string) { @Builder IngredientItem(title:string, name: string, value: string) {
Flex() { Flex() {
Text(title) Text(title)
.fontSize(17.4) .fontSize(17.4)
...@@ -531,6 +531,6 @@ ...@@ -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布局。 本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
...@@ -12,25 +12,25 @@ ...@@ -12,25 +12,25 @@
## 栅格系统 ## 栅格系统
栅格系统有Columns、Margins、Gutters三个概念。 栅格系统有Column、Margin、Gutter三个概念。
![zh-cn_image_0000001217236574](figures/zh-cn_image_0000001217236574.png) ![zh-cn_image_0000001217236574](figures/zh-cn_image_0000001217236574.png)
1. Gutters 1. Gutter:
用来控制元素与元素之间距离关系。可以根据设备的不同尺寸,定义不同的gutter值,作为栅格布局的统一规范。为了保证较好的视觉效果,通常gutter的取值不会大于margin的取值。 用来控制元素与元素之间距离关系。可以根据设备的不同尺寸,定义不同的gutter值,作为栅格布局的统一规范。为了保证较好的视觉效果,通常gutter的取值不会大于margin的取值。
2. Margins 2. Margin:
离栅格容器边缘的距离。可以根据设备的不同尺寸,定义不同的margin值,作为栅格布局的统一规范。 离栅格容器边缘的距离。可以根据设备的不同尺寸,定义不同的margin值,作为栅格布局的统一规范。
3. Columns: 3. Column:
栅格布局的主要定位工具。根据设备的不同尺寸,把栅格容器分割成不同的列数,在保证margin和gutter符合规范的情况下,根据总Column的个数计算每个Column列的宽度。 栅格布局的主要定位工具。根据设备的不同尺寸,把栅格容器分割成不同的列数,在保证margin和gutter符合规范的情况下,根据总Column的个数计算每个Column列的宽度。
### 系统栅格断点 ### 系统栅格断点
系统根据不同水平宽度设备对应Columns的数量关系,形成了一套断点规则定义。 系统根据不同水平宽度设备对应Column的数量关系,形成了一套断点规则定义。
系统以设备的水平宽度的屏幕密度像素值作为断点依据,根据当前设备水平宽度所在的断点范围,定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述,以及对应的默认总列数(columns),边距(gutter),间隔(gutter)定义如下: 系统以设备的水平宽度的屏幕密度像素值作为断点依据,根据当前设备水平宽度所在的断点范围,定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述,以及对应的默认总列数(column),边距(margin),间隔(gutter)定义如下:
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin | | 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
通过接口`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`创建栅格容器,栅格容器内的所有子组件可以使用栅格布局。 通过接口`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 }) {} GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
GridContainer() {} GridContainer() {}
``` ```
上述例子中,默认在在小宽度类型设备(SizeType.SM)上,栅格容器被分为4列,列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上,栅格容器被分为8列,列于列的间隔为24vp,两侧边距是32vp。 上述例子中,默认在小宽度类型设备(SizeType.SM)上,栅格容器被分为4列,列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上,栅格容器被分为8列,列与列的间隔为24vp,两侧边距是32vp。
- 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置,如: - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置,如:
......
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
首先导入媒体查询模块,例如: 首先导入媒体查询模块,例如:
``` ```
import mediaquery from '@ohos.mediaquery' import mediaquery from '@ohos.mediaquery'
``` ```
然后通过matchMediaSync接口设置媒体查询条件,并保存返回的条件监听句柄,例如: 然后通过matchMediaSync接口设置媒体查询条件,并保存返回的条件监听句柄,例如:
``` ```
listener = mediaquery.matchMediaSync('(orientation: landscape)') listener = mediaquery.matchMediaSync('(orientation: landscape)')
``` ```
最后通过上面保存的条件监听句柄listener去注册回调函数,在回调函数里更改页面布局或者实现业务逻辑,当匹配到媒体查询条件时会触发此回调函数,例如: 最后通过上面保存的条件监听句柄listener去注册回调函数,在回调函数里更改页面布局或者实现业务逻辑,当匹配到媒体查询条件时会触发此回调函数,例如:
``` ```
...@@ -39,13 +39,13 @@ listener.on('change', onPortrait) ...@@ -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) ### 媒体类型(media-type)
......
...@@ -267,6 +267,6 @@ ...@@ -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布局以及页面路由的基本用法。 本示例构建了食物分类列表页面和食物详情页,向开发者展示了List布局、Grid布局以及页面路由的基本用法。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册