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

!3561 DX意见修改

Merge pull request !3561 from LiAn/master
......@@ -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() {
......
......@@ -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() {
......
# Grid
# 栅格布局
栅格布局容器根节点,使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/arkui-js/js-components-grid-container.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布局。
......@@ -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指定此栅格容器内的组件使用此设备宽度类型的栅格设置,如:
......
......@@ -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)
......
......@@ -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布局以及页面路由的基本用法。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册