Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 1f0a919b 编写于 作者: W wangshuainan1
浏览文件
操作

3.30docs修改 

Signed-off-by: Nwangshuainan1 <wangshuainan1@huawei.com>
上级 a2c37728
显示空白变更内容
内联 并排
Showing with 9 addition and 1218 deletion
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 1f0a919b
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div> <div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
&lt;input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" /&gt;</div> <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" />;</div>
``` ```
``` ```
...@@ -27,7 +27,12 @@ ...@@ -27,7 +27,12 @@
}, },
antialias() { antialias() {
const el = this.$refs.canvas1; 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();
}
}
``` ```
- 示意图（关闭抗锯齿） - 示意图（关闭抗锯齿）
...@@ -260,9 +265,7 @@ export default { ...@@ -260,9 +265,7 @@ export default {
ctx.moveTo(140, 10); ctx.moveTo(140, 10);
ctx.lineTo(140, 160); ctx.lineTo(140, 160);
ctx.stroke(); ctx.stroke();
ctx.font = '18px sans-serif'; ctx.font = '18px sans-serif';
// Show the different textAlign values // Show the different textAlign values
ctx.textAlign = 'start'; ctx.textAlign = 'start';
ctx.fillText('textAlign=start', 140, 60); ctx.fillText('textAlign=start', 140, 60);
...@@ -300,9 +303,7 @@ export default { ...@@ -300,9 +303,7 @@ export default {
ctx.moveTo(0, 120); ctx.moveTo(0, 120);
ctx.lineTo(400, 120); ctx.lineTo(400, 120);
ctx.stroke(); ctx.stroke();
ctx.font = '20px sans-serif'; ctx.font = '20px sans-serif';
ctx.textBaseline = 'top'; ctx.textBaseline = 'top';
ctx.fillText('Top', 10, 120); ctx.fillText('Top', 10, 120);
ctx.textBaseline = 'bottom'; ctx.textBaseline = 'bottom';
...@@ -339,7 +340,6 @@ export default { ...@@ -339,7 +340,6 @@ export default {
ctx.globalAlpha = 0.4; ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50); ctx.fillRect(50, 50, 50, 50);
} }
} }
``` ```
......
zh-cn/application-dev/ui/ui-js-components-swiper.md 已删除 100644 → 0
浏览文件 @ a2c37728
# Swiper开发指导
Swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考[Swiper](../reference/arkui-js/js-components-container-swiper.md)。
## 创建Swiper组件
在pages/index目录下的hml文件中创建一个Swiper组件。
```
<!-- xxx.hml-->
<div class="container">
<swiper>
<div class="item" style="background-color: #bf45ea;">
<text>item1</text>
</div>
<div class="item" style="background-color: #088684;">
<text>item2</text>
</div>
<div class="item" style="background-color: #7786ee;">
<text>item3</text>
</div>
</swiper>
</div>
```
```
/* 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组件支持除&lt;list&gt;之外的子组件。
## 添加属性
Swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect="fade"））。
```
<!-- xxx.hml-->
<div class="container">
<swiper index="1" autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
scrolleffect="fade" loop="false">
<div class="item" style="background-color: #bf45ea;">
<text>item1</text>
</div>
<div class="item" style="background-color: #088684;">
<text>item2</text>
</div>
<div class="item" style="background-color: #7786ee;">
<text>item3</text>
</div>
<div class="item" style="background-color: #c88cee;">
<text>item4</text>
</div>
</swiper>
</div>
```
```
/* 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）。
```
<!-- xxx.hml-->
<div class="container">
<swiper index="1" autoplay="true" interval="2000" duration="500" >
<div class="item" style="background: linear-gradient(to right,#806dd9,#5d44ea,#2eb9d5)">
<text>item1</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2eb9d5,#0e7db4,#2673d9)">
<text>item2</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2673d9,#0c89af,#806dd9)">
<text>item3</text>
</div>
</swiper>
</div>
```
```
/* 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（切换动画结束时触发）事件。
```
<!-- xxx.hml-->
<div class="container">
<swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper">
<div class="item" style="background-color: #bf45ea">
<text>item1</text>
</div>
<div class="item" style="background-color: #088684;">
<text>item2</text>
</div>
<div class="item" style="background-color: #7786ee;">
<text>item3</text>
</div>
<div class="item" style="background-color: #c88cee;">
<text>item4</text>
</div>
</swiper>
<div class="content">
<button class="pnbtn" onclick="previous">Previous</button>
<select onchange="selectChange">
<option value="0">swipeTo 1</option>
<option value="1">swipeTo 2</option>
<option value="2">swipeTo 3</option>
<option value="3">swipeTo 4</option>
</select>
<button class="pnbtn" onclick="next">Next</button>
</div>
</div>
```
```
/* 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.hml-->
<div class="container">
<swiper duration="500" indicator="false" id="swiper" onchange="change">
<div class="item" for="item in list">
<image src="{{item.src}}"></image>
</div>
</swiper>
<div class="content">
<div class="content_item {{index == $idx?'actived':''}}" for="item in list" onclick="imageTo({{$idx}})">
<image src="{{item.src}}"></image>
</div>
</div>
</div>
```
```
/* 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)
zh-cn/application-dev/ui/ui-js-components-switch.md 已删除 100644 → 0
浏览文件 @ a2c37728
# Switch开发指导
Switch为开关选择器，切换开启或关闭状态。具体用法请参考[Switch](../reference/arkui-js/js-components-basic-switch.md)。
## 创建Switch组件
在pages/index目录下的hml文件中创建一个Switch组件。
```
<div class="container">
<switch></switch>
</div>
```
```
/* 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.hml -->
<div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
</div>
```
```
/* 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后显示地址模块，点击按钮改变颜色。
```
<!-- xxx.hml -->
<div class="container">
<div class="change">
<text>Choose default address:</text>
<switch showtext="true" texton="on" textoff="off" checked="true" @change="switchChange"></switch>
</div>
<div class="content">
<text class="address"><span>Shipping address:</span><span class="textSpan">{{address}}</span></text>
</div>
<div class="myAddress" style="display: {{addressDisplay}};">
<text style="font-size: 30px;margin-bottom: 50px;">Choose an address:</text>
<text class="addressText" style="background-color: {{item == address?'#0fabe7':''}};color: {{item == address?'white':'black'}};"
for="item in addressList"@click="changeAddress({{$idx}}})">{{item}}</text>
</div>
</div>
```
```
/* 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)
zh-cn/application-dev/ui/ui-js-components-text.md 已删除 100644 → 0
浏览文件 @ a2c37728
# Text
Text是文本组件，用于呈现一段文本信息。具体用法请参考[Text API](../reference/arkui-js/js-components-basic-text.md)。
## 创建Text组件
在pages/index目录下的hml文件中创建一个Text组件。
```
<!-- xxx.hml -->
<div class="container" style="text-align: center;justify-content: center; align-items: center;">
<text> Hello World </text>
</div>
```
```
/* 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属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage
</text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage
</text>
</div>
```
```
/* 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自有样式。
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline">
This is a passage
</text>
<text style="text-decoration:line-through;text-decoration-color: red">
This is a passage
</text>
</div>
```
/* 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属性将隐藏内容以省略号的形式展现
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
/* 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自有样式。
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="text1">
Welcome to the world
</text>
<text class="text2">
Welcome to the world
</text>
</div>
</div
```
/* xxx.css */
.container {
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content{
width: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text1{
height: 200px;
border:1px solid #1a1919;
margin-bottom: 50px;
text-align: center;
word-break: break-word;
font-size: 40px;
}
.text2{
height: 200px;
border:1px solid #0931e8;
text-align: center;
word-break: break-all;
font-size: 40px;
}
​ ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
- Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件
```
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1
</span>
<span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span>
<span style="color: red;"> passage </span>
</text>
</div>
```
![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属性来实现文本内容的隐藏和显示。
```
<!-- xxx.hml -->
<div class="container">
<div style="align-items: center;justify-content: center;">
<text class="title">
{{ content }}
</text>
<switch checked="true" onchange="test"></switch>
</div>
<text class="span-container" style="color: #ff00ff;">
<span show="{{isShow}}"> {{ content }} </span>
<span style="color: white;">
1
</span>
<span style="color: #f76160">Hide clip </span>
</text>
</div>
```
```
/* 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)
zh-cn/application-dev/ui/ui-js-components-toolbar.md 已删除 100644 → 0
浏览文件 @ a2c37728
# Toolbar开发指导
Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。具体用法请参考[Toolbar](../reference/arkui-js/js-components-basic-toolbar.md)。
## 创建Toolbar组件
在pages/index目录下的hml文件中创建一个Toolbar组件。
```
<!-- xxx.hml -->
<div class="container">
<toolbar style="background-color: #F1F3F5;">
<toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item>
</toolbar>
</div>
```
```
/* 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.hml -->
<div class="container">
<toolbar>
<toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item>
<toolbar-item value="item3"></toolbar-item>
<toolbar-item value="item4"></toolbar-item>
<toolbar-item value="item5"></toolbar-item>
<toolbar-item value="item6"></toolbar-item>
</toolbar>
</div>
```
```
/* 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.hml -->
<div class="container">
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="item1" icon="common/images/1.png" class="toolbarActive"></toolbar-item>
<toolbar-item value="item2" icon="common/images/2.png"></toolbar-item>
<toolbar-item value="item3" icon="common/images/1.png"></toolbar-item>
<toolbar-item value="item4" icon="common/images/2.png"></toolbar-item>
</toolbar>
</div>
```
```
/* 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.hml -->
<div class="container">
<toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="item1" icon="common/images/1.png" style="color: {{itemColor}};" onclick="itemClick"></toolbar-item>
<toolbar-item value="item2" icon="common/images/2.png" style="color: {{itemColor}}"></toolbar-item>
<toolbar-item value="item3" icon="common/images/3.png" style="color: {{itemColor}}" onlongpress="itemLongPress"></toolbar-item>
</toolbar>
</div>
```
```
/* 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.hml -->
<div class="container">
<image src="{{imgList[active]}}"></image>
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active
== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
</toolbar>
</div>
```
```
/* 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)
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md 已删除 100644 → 0
浏览文件 @ a2c37728
# 栅格布局
栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
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)定义如下：
<a id="grid_system_define">系统栅格定义</a>
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
| -------- | -------- | -------- | -------- | -------- | -------- |
| 0&lt;水平宽度&lt;320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
| 320vp&lt;=水平宽度&lt;600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
| 600vp&lt;=水平宽度&lt;840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
| 840&lt;=水平分辨率 | 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)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或