Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 69ecfe7c 编写于 作者: W wangshuainan
浏览文件
操作

整改文档 

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>
Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>
上级 cfe11e26
显示空白变更内容
内联 并排
Showing with 125 addition and 114 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 69ecfe7c
...@@ -211,24 +211,24 @@ ...@@ -211,24 +211,24 @@
strokeColor: '#0081ff', strokeColor: '#0081ff',
fillColor: '#cce5ff', fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true, gradient: true
} }
], ],
lineOps: { lineOps: {
xAxis: { xAxis: {
min: 0, min: 0,
max: 20, max: 20,
display: false, display: false
}, },
yAxis: { yAxis: {
min: 0, min: 0,
max: 1000, max: 1000,
display: false, display: false
}, },
series: { series: {
lineStyle: { lineStyle: {
width: "5px", width: "5px",
smooth: true, smooth: true
}, },
headPoint: { headPoint: {
shape: "circle", shape: "circle",
...@@ -236,14 +236,14 @@ ...@@ -236,14 +236,14 @@
strokeWidth: 5, strokeWidth: 5,
fillColor: '#ffffff', fillColor: '#ffffff',
strokeColor: '#007aff', strokeColor: '#007aff',
display: true, display: true
}, },
loop: { loop: {
margin: 2, margin: 2,
gradient: true, gradient: true
}
} }
} }
},
}, },
addData() { addData() {
this.$refs.linechart.append({ this.$refs.linechart.append({
...@@ -294,15 +294,15 @@ ...@@ -294,15 +294,15 @@
barData: [ barData: [
{ {
fillColor: '#f07826', fillColor: '#f07826',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
}, },
{ {
fillColor: '#cce5ff', fillColor: '#cce5ff',
data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
}, },
{ {
fillColor: '#ff88bb', fillColor: '#ff88bb',
data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
}, },
], ],
barOps: { barOps: {
...@@ -310,14 +310,14 @@ ...@@ -310,14 +310,14 @@
min: 0, min: 0,
max: 20, max: 20,
display: false, display: false,
axisTick: 10, axisTick: 10
}, },
yAxis: { yAxis: {
min: 0, min: 0,
max: 1000, max: 1000,
display: false, display: false
}, }
}, }
} }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ 69ecfe7c
...@@ -108,9 +108,6 @@ export default { ...@@ -108,9 +108,6 @@ export default {
this.qr_type = 'circle' this.qr_type = 'circle'
} }
}, },
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) { setcol(e) {
this.qr_col = e.newValue this.qr_col = e.newValue
}, },
...@@ -122,4 +119,3 @@ export default { ...@@ -122,4 +119,3 @@ export default {
![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif) ![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif)
zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md
浏览文件 @ 69ecfe7c
...@@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void ...@@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void
| repeat | 动画重播事件。 | | repeat | 动画重播事件。 |
- 示例 - 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="idName" class="box"></div> <div id="idName" class="box"></div>
<div class="buttonBox"> <div class="buttonBox">
<button @click="start"> <button @click="start">
start start
</button> </button>
<button @click="cancel"> <button @click="cancel">
cancels cancel
</button> </button>
</div> </div>
</div> ```
```
``` ```
/* xxx.css */ /* xxx.css */
......
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @ 69ecfe7c
...@@ -67,4 +67,3 @@ ...@@ -67,4 +67,3 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 通用样式都不是必填项。 > 通用样式都不是必填项。
zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ 69ecfe7c
...@@ -59,12 +59,12 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage ...@@ -59,12 +59,12 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
```js ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
jump() { jump() {
router.push({ router.push({
// 路径要与config.json配置里面的相同 // 路径要与config.json配置里面的相同
uri: 'pages/detailpage', url: 'pages/detailpage',
}); });
}, },
} }
...@@ -92,7 +92,7 @@ export default { ...@@ -92,7 +92,7 @@ export default {
```js ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
jumpBack() { jumpBack() {
router.back(); router.back();
...@@ -138,7 +138,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar ...@@ -138,7 +138,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
<text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text> <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
</div> </div>
<list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center"> <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
<list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})"> <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
<text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text> <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
</list-item> </list-item>
</list> </list>
...@@ -147,19 +147,19 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar ...@@ -147,19 +147,19 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
```js ```js
// xxx.js // xxx.js
import router from '@system.router' import router from '@ohos.router'
export default { export default {
data: { list: [] }, data: { list: [] },
onInit() { onInit() {
for(var i = 0; i < 10; i++) { for(var i = 0; i < 10; i++) {
var item = { uri: "pages/card_transition/target_page/index", var item = { url: "pages/card_transition/target_page/index",
title: "this is title" + i, id: "item_" + i } title: "this is title" + i, id: "item_" + i }
this.list.push(item); this.list.push(item);
} }
}, },
jumpPage(id, uri) { jumpPage(id, url) {
var cardId = this.$element(id).ref; var cardId = this.$element(id).ref;
router.push({ uri: uri, params : { ref : cardId } }); router.push({ url: url, params : { ref : cardId } });
} }
} }
``` ```
...@@ -167,6 +167,8 @@ export default { ...@@ -167,6 +167,8 @@ export default {
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #ABDAFF; background-color: #ABDAFF;
...@@ -197,6 +199,8 @@ export default { ...@@ -197,6 +199,8 @@ export default {
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #EBFFD7; background-color: #EBFFD7;
...@@ -255,14 +259,14 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -255,14 +259,14 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
```js ```js
<!-- xxx.js --> <!-- xxx.js -->
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
}, },
jump() { jump() {
router.push({ router.push({
uri:'pages/transition2/transition2' url:'pages/transition2/transition2'
}) })
} }
} }
...@@ -325,7 +329,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -325,7 +329,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
```js ```js
<!-- xxx.js --> <!-- xxx.js -->
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
...@@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
router.back() router.back()
} }
} }
```
```css ```
```css
<!-- xxx.css --> <!-- xxx.css -->
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
} }
``` ```
![transition](figures/transition.gif) ![transition](figures/transition.gif)
zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
浏览文件 @ 69ecfe7c
...@@ -37,10 +37,8 @@ export default { ...@@ -37,10 +37,8 @@ export default {
console.log("组件创建") console.log("组件创建")
}, },
onAttached() { onAttached() {
this.value = "组件挂载" this.value = "组件挂载",
}, console.log("组件挂载")
onDetached() {
this.value = ""
}, },
onShow() { onShow() {
console.log("Page显示") console.log("Page显示")
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md
浏览文件 @ 69ecfe7c
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> <path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> <path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z"> <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
</animateMotion> </animateMotion>
</path> </path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md
浏览文件 @ 69ecfe7c
...@@ -193,6 +193,7 @@ transform动效，支持的组件范围： ...@@ -193,6 +193,7 @@ transform动效，支持的组件范围：
dur="3s" repeatCount="indefinite"></animateTransform> dur="3s" repeatCount="indefinite"></animateTransform>
</rect> </rect>
<text x="20" y="700" fill="#D2691E" font-size="40"> <text x="20" y="700" fill="#D2691E" font-size="40">
animate-transform
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
dur="3s" repeatCount="indefinite"></animateTransform> dur="3s" repeatCount="indefinite"></animateTransform>
</text> </text>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ 69ecfe7c
...@@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图 ...@@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
<path d="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" stroke="red" fill="none"></path> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path>
<text> <text>
<textpath fill="#D2691E" path="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600"font-size="30px" stroke="black" stroke-width="1" > <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px" stroke="black" stroke-width="1" >
This is TextPath. This is TextPath.
<tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan> <tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan>
<tspan font-size="30px">Let's play.</tspan> <tspan font-size="30px">Let's play.</tspan>
...@@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图 ...@@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path> </path>
<!-- 数值百分比 --> <!-- 数值百分比 -->
<text> <text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan x="50" fill="blue">This is first tspan.</tspan> <tspan x="50" fill="blue">This is first tspan.</tspan>
<tspan x="50%">This is second tspan.</tspan> <tspan x="50%">This is second tspan.</tspan>
...@@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图 ...@@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan x="50" fill="blue"> <tspan x="50" fill="blue">
tspan attribute x|rotate tspan attribute x|rotate
...@@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图 ...@@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" stroke="red" <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none"> fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan dx="20" fill="blue"> <tspan dx="20" fill="blue">
tspan attribute fill|fill-opacity tspan attribute fill|fill-opacity
...@@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图 ...@@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" stroke="red" <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none"> fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan dx="20" fill="blue"> <tspan dx="20" fill="blue">
tspan attribute stroke tspan attribute stroke
......
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 69ecfe7c
...@@ -73,6 +73,23 @@ struct AnimateToExample { ...@@ -73,6 +73,23 @@ struct AnimateToExample {
} }
this.flag = !this.flag this.flag = !this.flag
}) })
Button('change rotate angle')
.margin(50)
.rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
.onClick(() => {
animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.AlternateReverse,
onFinish: () => {
console.info('play end')
}
}, () => {
this.rotateAngle = 90
})
})
}.width('100%').margin({ top: 5 }) }.width('100%').margin({ top: 5 })
} }
} }
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 69ecfe7c
...@@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换 ...@@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换
```ts ```ts
// xxx.ets // xxx.ets
@Extend(Text) function textStyle () {
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
}
@Entry @Entry
@Component @Component
struct DragExample { struct DragExample {
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
@State text: string = ''; @State text: string = ''
@State bool: boolean = false; @State bool: boolean = true
@State appleVisible: Visibility = Visibility.Visible; @State eventType: string = ''
@State orangeVisible: Visibility = Visibility.Visible; @State appleVisible: Visibility = Visibility.Visible
@State bananaVisible: Visibility = Visibility.Visible; @State orangeVisible: Visibility = Visibility.Visible
@State bananaVisible: Visibility = Visibility.Visible
private dragList: string[] = ['apple', 'orange', 'banana']
@State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible]
@State index: number = 0
// 自定义拖拽过程中显示的内容 // 自定义拖拽过程中显示的内容
@Builder pixelMapBuilder() { @Builder pixelMapBuilder() {
...@@ -74,45 +86,28 @@ struct DragExample { ...@@ -74,45 +86,28 @@ struct DragExample {
.textAlign(TextAlign.Start) .textAlign(TextAlign.Start)
.margin(5) .margin(5)
Row({ space: 15 }) { Row({ space: 15 }) {
Text('apple') ForEach(this.dragList, (item, index) => {
.width('25%') Text(item)
.height(35) .textStyle()
.fontSize(16) .visibility(this.fruitVisible[index])
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.appleVisible)
.onDragStart(() => { .onDragStart(() => {
this.bool = true; this.bool = true
this.text = 'apple'; this.text = item
this.appleVisible = Visibility.None; this.fruitVisible[index] = Visibility.None
return this.pixelMapBuilder; return this.pixelMapBuilder
}) })
Text('orange') .onTouch((event: TouchEvent) => {
.width('25%') if (event.type === TouchType.Down) {
.height(35) this.eventType = 'Down'
.fontSize(16) this.index = index
.textAlign(TextAlign.Center) }
.backgroundColor(0xAFEEEE) if (event.type === TouchType.Up) {
.visibility(this.orangeVisible) this.eventType = 'Up'
.onDragStart(() => { if (this.bool) {
this.bool = true; this.fruitVisible[index] = Visibility.Visible
this.text = 'orange'; }
this.orangeVisible = Visibility.None; }
return this.pixelMapBuilder;
}) })
Text('banana')
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.bananaVisible)
.onDragStart((event: DragEvent, extraParams: string) => {
console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
this.bool = true;
this.text = 'banana';
this.bananaVisible = Visibility.None;
return this.pixelMapBuilder;
}) })
}.padding({ top: 10, bottom: 10 }).margin(10) }.padding({ top: 10, bottom: 10 }).margin(10)
...@@ -142,21 +137,22 @@ struct DragExample { ...@@ -142,21 +137,22 @@ struct DragExample {
.padding(15) .padding(15)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => { .onDragEnter((event: DragEvent, extraParams: string) => {
console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragMove((event: DragEvent, extraParams: string) => { .onDragMove((event: DragEvent, extraParams: string) => {
console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragLeave((event: DragEvent, extraParams: string) => { .onDragLeave((event: DragEvent, extraParams: string) => {
console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDrop((event: DragEvent, extraParams: string) => { .onDrop((event: DragEvent, extraParams: string) => {
var jsonString = JSON.parse(extraParams); let jsonString = JSON.parse(extraParams);
if (this.bool) { if (this.bool) {
// 通过splice方法插入元素 // 通过splice方法插入元素
this.numbers.splice(jsonString.insertIndex, 0, this.text); this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false; this.bool = false
} }
this.fruitVisible[this.index] = Visibility.None
}) })
}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或