From 3470c9038c0c470bd032b04de4574233521056be Mon Sep 17 00:00:00 2001 From: wangshuainan1 Date: Wed, 30 Mar 2022 20:45:29 +0800 Subject: [PATCH] =?UTF-8?q?3.30docs=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: wangshuainan1 --- .../ui/ui-js-components-swiper.md | 360 ++++++++++++++++++ .../ui/ui-js-components-switch.md | 197 ++++++++++ .../ui/ui-js-components-text.md | 270 +++++++++++++ .../ui/ui-js-components-toolbar.md | 231 +++++++++++ .../ui/ui-ts-layout-grid-container.md | 151 ++++++++ 5 files changed, 1209 insertions(+) create mode 100644 zh-cn/application-dev/ui/ui-js-components-swiper.md create mode 100644 zh-cn/application-dev/ui/ui-js-components-switch.md create mode 100644 zh-cn/application-dev/ui/ui-js-components-text.md create mode 100644 zh-cn/application-dev/ui/ui-js-components-toolbar.md create mode 100644 zh-cn/application-dev/ui/ui-ts-layout-grid-container.md diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md new file mode 100644 index 0000000000..de9f3aa008 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md @@ -0,0 +1,360 @@ +# Swiper开发指导 + + +Swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考[Swiper](../reference/arkui-js/js-components-container-swiper.md)。 + + +## 创建Swiper组件 + +在pages/index目录下的hml文件中创建一个Swiper组件。 + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+ +
+``` + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +``` + + +![zh-cn_image_0000001181495038](figures/zh-cn_image_0000001181495038.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> Swiper组件支持除<list>之外的子组件。 + + +## 添加属性 + +Swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect="fade"））。 + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+
+ item4 +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +``` + +![zh-cn_image_0000001181655292](figures/zh-cn_image_0000001181655292.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 设置indicator（是否启用导航点指示器）属性为true时digital（是否启用数字导航点）属性才会生效。 +> +> - Swiper子组件的个数大于等于2时设置的loop属性才会生效。 +> +> - scrolleffect属性仅在loop属性值为false时生效。 + + +## 设置样式 + +设置Swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（ndicator-top）及选中时的颜色（indicator-selected-color）。 + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; +} +swiper{ + width: 500px; + height: 500px; + border-radius: 250px;indicator-color: white; indicator-selected-color: blue; indicator-size: 40px; indicator-top: 100px; + overflow: hidden ; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + text-align: center; + margin-top: 150px; + font-size: 50px; + color: white; +} +``` + +![zh-cn_image_0000001226896657](figures/zh-cn_image_0000001226896657.gif) + + +## 绑定事件 + +创建两个text组件添加点击事件，当点击后就调用showPrevious（显示上一个子组件）或showNext（显示下一个子组件）方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。Swiper组件绑定change（当前显示的组件索引变化时触发）和finish（切换动画结束时触发）事件。 + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+
+ item4 +
+ +
+ + + +
+
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +select{ + background-color: white; + width: 250px; + height: 80px; +} +.content{ + margin-top: 100px; + justify-content: space-around; +} +.pnbtn{ + width: 200px; + height: 80px; + font-size: 30px; +} +``` + + +``` +import prompt from '@system.prompt'; +export default{ + change(e){ + prompt.showToast({duration:2000,message:"current index:"+e.index}); + }, + finish(){ + prompt.showToast({duration:2000,message:"切换动作结束"}); + }, + selectChange(e){ + this.$element('swiper').swipeTo({index: Number(e.newValue)}); + }, + previous(){ + this.$element('swiper').showPrevious(); + }, + next(){ + this.$element('swiper').showNext(); + } +} +``` + +![zh-cn_image_0000001227016767](figures/zh-cn_image_0000001227016767.gif) + + +## 场景示例 + +本场景中使用Swiper创建一个轮播图，在轮播图底部制作一个缩略图，点击缩略图后调用swipeTo方法切换到对应的轮播图。 + + +``` + +
+ +
+ +
+ +
+
+ +
+
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + width: 100%; + height: 500px; +} +.item{ + width: 100%; + height: 500px; +} +.content{ + margin-top: -120px; + width: 70%; + display: flex; + justify-content: space-around; + height: 100px; +} +.content_item{ + padding: 5px; + transform: scale(0.5); +} +.actived{ + transform: scale(1);border: 1px solid #b20937ea; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + index: 0, + list:[ + {src: 'common/images/1.png'}, + {src: 'common/images/2.png'}, + {src: 'common/images/3.png'}, + {src: 'common/images/4.png'},] + }, + imageTo(index){ + this.index = index; + this.$element('swiper').swipeTo({index: index}); + }, + change(e){ + this.index = e.index; + } +} +``` + +![zh-cn_image_0000001263359599](figures/zh-cn_image_0000001263359599.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md new file mode 100644 index 0000000000..aa7e7e71cb --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-switch.md @@ -0,0 +1,197 @@ +# Switch开发指导 + + +Switch为开关选择器，切换开启或关闭状态。具体用法请参考[Switch](../reference/arkui-js/js-components-basic-switch.md)。 + + +## 创建Switch组件 + +在pages/index目录下的hml文件中创建一个Switch组件。 + + +``` +
+ +
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001229784239](figures/zh-cn_image_0000001229784239.png) + + +## 添加属性和方法 + + witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +switch{ + // 选中时的字体颜色 + texton-color: #002aff; + // 未选中时的字体颜色 + textoff-color: silver; + text-padding: 20px; + font-size: 50px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + switchChange(e){ + if(e.checked){ + prompt.showToast({ + message: "open" + }); + }else{ + prompt.showToast({ + message: "close" + }); + } + } +} +``` + + +![zh-cn_image_0000001221030133](figures/zh-cn_image_0000001221030133.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。 + + +## 场景示例 + +在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。 + + 实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 + +``` + +
+
+ Choose default address: + +
+
+ Shipping address:{{address}} +
+
+ Choose an address: + {{item}} +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + background-color: #F1F3F5; + flex-direction: column; + padding: 50px; +} +.change{ + margin-top: 20%; + width: 100%; + justify-content: center; +} +switch{ + texton-color: #002aff; + textoff-color: silver; + text-padding: 20px; +} +.content{ + width: 70%; + text-align: center; + flex-direction: column; + border: 1px solid #002aff; + margin-left: 15%; + text-align: center; +} +.address{ + width: 100%; + height: 100px; + line-height: 100px; + text-align: center; + font-size: 28px; + margin-bottom: 50px; +} +.textSpan{ + color: #0aa9f1; +} +.myAddress{ + flex-direction: column; + margin-top: 50px; +} +.addressText{ + margin-left: 35%; + width: 30%; + height: 75px; + text-align: center; + color: white; + margin-bottom: 30px; + border-radius: 10px; + border: 1px solid #0fabe7; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + address: '', + addressDisplay: 'none', + addressList: ['family','company','commissary'], + }, + onInit(){ + // 初始化默认地址为地址列表中的第一个 + this.address = this.addressList[0]; + }, + switchChange(e){ + if(e.checked){ + this.addressDisplay = "none"; + }else{ + this.addressDisplay = "flex"; + } + }, + changeAddress(i){ + this.address= this.addressList[i]; + } +} +``` + +![zh-cn_image_0000001220830223](figures/zh-cn_image_0000001220830223.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md new file mode 100644 index 0000000000..b6b79dffe3 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -0,0 +1,270 @@ +# Text + +Text是文本组件，用于呈现一段文本信息。具体用法请参考[Text API](../reference/arkui-js/js-components-basic-text.md)。 + + +## 创建Text组件 + +在pages/index目录下的hml文件中创建一个Text组件。 + +``` + +
+ Hello World +
+``` + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001211383427](figures/zh-cn_image_0000001211383427.png) + + +## 设置Text组件样式和属性 + +- 添加文本样式 + + + 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 + +``` + +
+ + This is a passage + + + This is a passage + +
+``` + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + + + ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png) + + +- 添加划线 + +​ 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 Text自有样式。 + + + +
+ + This is a passage + + + This is a passage + +
+``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} +text{ + font-size: 50px; +} +``` + + ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png) + + +- 隐藏文本内容 + + 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现 + +``` + +
+ + This is a passage + +
+``` + + /* xxx.css */ + .container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + background-color: #F1F3F5; + justify-content: center; + } + .text{ + width: 200px; + max-lines: 1; + text-overflow:ellipsis; + } + + **说明：** + +- text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。 +- max-lines属性设置文本最多可以展示的行数。 + + +​ ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png) + + +- 设置文本折行 + +​ 设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。 + +``` + +
+
+ + Welcome to the world + + + Welcome to the world + +
+
+
+ + This is a passage + + + This 1 + + is a 1 + passage + +
+ ``` + + + ![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png) + + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。 + > + > - 在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。 + + +## 场景示例 + +Text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。 + +``` + +
+
+ + {{ content }} + + +
+ + {{ content }} + + 1 + + Hide clip + +
+``` + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + align-items: center; + flex-direction: column; + justify-content: center; + background-color: #F1F3F5; +} +.title { + font-size: 26px; + text-align:center; + width: 200px; + height: 200px; +} +``` + +``` +// xxx.js +export default { + data: { + isShow:true, + content: 'Hello World' + }, + onInit(){ }, + test(e) { + this.isShow = e.checked + } +} +``` + +![zh-cn_image_0000001208636379](figures/zh-cn_image_0000001208636379.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-toolbar.md b/zh-cn/application-dev/ui/ui-js-components-toolbar.md new file mode 100644 index 0000000000..09f8c17ff0 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-toolbar.md @@ -0,0 +1,231 @@ +# Toolbar开发指导 + + +Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。具体用法请参考[Toolbar](../reference/arkui-js/js-components-basic-toolbar.md)。 + + +## 创建Toolbar组件 + +在pages/index目录下的hml文件中创建一个Toolbar组件。 + + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +toolbar-item{ + font-size: 35px; +} +``` + +![zh-cn_image_0000001175668970](figures/zh-cn_image_0000001175668970.gif) + + +## 添加子组件 + + Toolbar组件仅支持toolbar-item为子组件，页面最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item，则保留前面4个，后续的将收纳到工具栏上的更多项中，通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。 + +``` + +
+ + + + + + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +toolbar-item{ + font-size: 35px; +} +``` + +![zh-cn_image_0000001175828962](figures/zh-cn_image_0000001175828962.gif) + + +## 设置样式 + +设置position样式控制Toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。 + + + +``` + +
+ + + + + + +
+``` + + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +.toolbarActive{ + color: red; + background-color: #daebef; +} +``` + + +![zh-cn_image_0000001218279254](figures/zh-cn_image_0000001218279254.png) + + +## 绑定事件 + +分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。 + + +``` + +
+ + + + + +
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + itemColor:'black' + }, + itemClick(){ + this.itemColor= "red"; + prompt.showToast({duration:2000,message:'item click'}); + }, + itemLongPress(){ + prompt.showToast({duration:2000,message:'item long press'}); + this.itemColor= "blue"; + }, +} +``` + +![zh-cn_image_0000001218439306](figures/zh-cn_image_0000001218439306.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> Toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。 + + +## 场景示例 + +本场景中开发者可点击toolbar-item组件，改变当前组件文本颜色并更换相对应的图片内容。 + + 使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。 + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + active: 0, + imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"], + itemList:[ + {option:'item1',icon:'common/images/1.png'}, + {option:'item2',icon:'common/images/2.png'}, + {option:'item3',icon:'common/images/3.png'}, + {option:'item4',icon:'common/images/4.png'}, + ] + }, + itemClick(id){ + this.active= id; + }, +} +``` + +![zh-cn_image_0000001263279105](figures/zh-cn_image_0000001263279105.gif) 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 new file mode 100644 index 0000000000..df9383f16b --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md @@ -0,0 +1,151 @@ +# 栅格布局 + + +栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有： + + +1. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。 +2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。 +3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。 + +为实现栅格布局效果，声明式范式提供了GridContainer栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。 + +## 栅格系统 + +栅格系统有Columns、Margins、Gutters三个概念。 + + +![zh-cn_image_0000001217236574](figures/zh-cn_image_0000001217236574.png) + + +1. Gutters： + 用来控制元素与元素之间距离关系。可以根据设备的不同尺寸，定义不同的gutter值，作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。 +2. Margins： + 离栅格容器边缘的距离。可以根据设备的不同尺寸，定义不同的margin值，作为栅格布局的统一规范。 +3. Columns: + 栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。 + + +### 系统栅格断点 + +系统根据不同水平宽度设备对应Columns的数量关系，形成了一套断点规则定义。 + +系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下： + +系统栅格定义 + + +| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin | +| -------- | -------- | -------- | -------- | -------- | -------- | +| 0<水平宽度<320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp | +| 320vp<=水平宽度<600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp | +| 600vp<=水平宽度<840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp | +| 840<=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp | + +## 如何使用 + +首先创建栅格容器组件，定义栅格布局，然后给栅格容器内的组件设置不同设备宽度类型下的占用列数。 + +### 创建栅格容器 + +通过接口：GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。 + +可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp： +``` +GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} +``` +栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如： + +``` +GridContainer() {} +``` +上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。 + + + +也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如： + +``` +GridContainer({ sizeType: SizeType.SM) { + Row() { + Text('1') + .useSizeType({ + xs: { span: 2}, + sm: { span: 3, offset: 1 }, + md: { span: 6, offset: 2 }, + lg: { span: 8, offset: 2 }, + }) + } +} +``` +上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。 + +### 栅格容器内子组件的栅格设置 + +栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offest表示列偏移量，指将组件放置在哪一个columns上。 如： + +``` +GridContainer() { + Row() { + Text('1') + .useSizeType({ + xs: { span: 2}, + sm: { span: 3, offset: 1 }, + md: { span: 6, offset: 2 }, + lg: { span: 8, offset: 2 }, + }) + } +} +``` +其中sm: { span: 2, offset: 0 } 指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。 +## 场景示例 + +使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。 + +``` +@Entry +@Component +struct GridContainerExample { + build() { + Column({ space: 5 }) { + GridContainer({ columns: 6 }) { + Flex({justifyContent:FlexAlign.SpaceAround}) { + Text('1') + .useSizeType({ + xs: { span: 2, offset: 0 }, + sm: { span: 2, offset: 0 }, + md: { span: 1, offset: 0 }, + lg: { span: 1, offset: 0 }, + }) + .height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center) + Text('2') + .useSizeType({ + xs: { span: 2, offset: 0 }, + sm: { span: 2, offset: 0 }, + md: { span: 4, offset: 0 }, + lg: { span: 4, offset: 0 }, + }) + .height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center) + Text('3') + .useSizeType({ + xs: { span: 2, offset: 0 }, + sm: { span: 2, offset: 0 }, + md: { span: 1, offset: 0 }, + lg: { span: 1, offset: 0 }, + }) + .height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center) + } + }.width('80%').backgroundColor('gray') + }.width('100%').margin({ top: 15 }) + } +} +``` + + + +小宽度类型设备(SizeType.SM)运行效果： + +![zh-cn_image_0000001218108718](figures/zh-cn_image_0000001218108718.png) + +中等宽度类型设备(SizeType.MD)运行效果： +![zh-cn_image_0000001262748569](figures/zh-cn_image_0000001262748569.png) -- GitLab