From 1f0a919b5cf36fcfcf35048019acd024bc3723b2 Mon Sep 17 00:00:00 2001 From: wangshuainan1 Date: Wed, 30 Mar 2022 20:42:22 +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 --- ...ponents-canvas-canvasrenderingcontext2d.md | 18 +- .../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 -------- 6 files changed, 9 insertions(+), 1218 deletions(-) delete mode 100644 zh-cn/application-dev/ui/ui-js-components-swiper.md delete mode 100644 zh-cn/application-dev/ui/ui-js-components-switch.md delete mode 100644 zh-cn/application-dev/ui/ui-js-components-text.md delete mode 100644 zh-cn/application-dev/ui/ui-js-components-toolbar.md delete mode 100644 zh-cn/application-dev/ui/ui-ts-layout-grid-container.md diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md index be29b6d2c1..c3e72b293f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md @@ -12,7 +12,7 @@
- <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" />
+ ; ``` ``` @@ -27,9 +27,14 @@ }, antialias() { const el = this.$refs.canvas1; - const ctx = el.getContext('2d', { antialias: true }); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }} + const ctx = el.getContext('2d', { antialias: true }); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + } + } ``` - + - 示意图（关闭抗锯齿） ![zh-cn_image_0000001214837333](figures/zh-cn_image_0000001214837333.png) @@ -260,10 +265,8 @@ export default { ctx.moveTo(140, 10); ctx.lineTo(140, 160); ctx.stroke(); - ctx.font = '18px sans-serif'; - - // Show the different textAlign values + // Show the different textAlign values ctx.textAlign = 'start'; ctx.fillText('textAlign=start', 140, 60); ctx.textAlign = 'end'; @@ -300,9 +303,7 @@ export default { ctx.moveTo(0, 120); ctx.lineTo(400, 120); ctx.stroke(); - ctx.font = '20px sans-serif'; - ctx.textBaseline = 'top'; ctx.fillText('Top', 10, 120); ctx.textBaseline = 'bottom'; @@ -339,7 +340,6 @@ export default { ctx.globalAlpha = 0.4; ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(50, 50, 50, 50); - } } ``` diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md deleted file mode 100644 index de9f3aa008..0000000000 --- a/zh-cn/application-dev/ui/ui-js-components-swiper.md +++ /dev/null @@ -1,360 +0,0 @@ -# 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 deleted file mode 100644 index aa7e7e71cb..0000000000 --- a/zh-cn/application-dev/ui/ui-js-components-switch.md +++ /dev/null @@ -1,197 +0,0 @@ -# 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 deleted file mode 100644 index b6b79dffe3..0000000000 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ /dev/null @@ -1,270 +0,0 @@ -# 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 deleted file mode 100644 index 09f8c17ff0..0000000000 --- a/zh-cn/application-dev/ui/ui-js-components-toolbar.md +++ /dev/null @@ -1,231 +0,0 @@ -# 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 deleted file mode 100644 index df9383f16b..0000000000 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md +++ /dev/null @@ -1,151 +0,0 @@ -# 栅格布局 - - -栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有： - - -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