add MultiSelectDragSample

Signed-off-by: b30058220 <baodi1@huawei.com>
This commit is contained in:
b30058220 2024-06-29 14:22:38 +08:00
parent b800f22851
commit df9ce15ef0
10 changed files with 121 additions and 4 deletions

View File

@ -350,6 +350,7 @@ entry/src/main/ets/
| | | | | |---HyperlinkDrag.ets
| | | | | |---ImageDrag.ets
| | | | | |---ListItemDrag.ets
| | | | | |---MultiSelectDrag.ets
| | | | | |---TextDrag.ets
| | | | | |---VideoDrag.ets
| | | | |---DragEventSample.ets // 拖拽事件

View File

@ -19,6 +19,7 @@ import { GridItemDrag } from './component/GridItemDrag';
import { HyperlinkDrag } from './component/HyperlinkDrag';
import { ImageDrag } from './component/ImageDrag';
import { ListItemDrag } from './component/ListItemDrag';
import { MultiSelectDrag } from './component/MultiSelectDrag';
import { TextDrag } from './component/TextDrag';
import { VideoDrag } from './component/VideoDrag';
import Logger from '../../../../util/Logger';
@ -264,6 +265,9 @@ struct DragEventSample {
IntroductionTitle({ introduction: $r('app.string.griditem') })
GridItemDrag()
IntroductionTitle({ introduction: $r('app.string.multiselect') })
MultiSelectDrag()
IntroductionTitle({ introduction: $r('app.string.listitem') })
ListItemDrag()

View File

@ -0,0 +1,91 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import componentSnapshot from '@ohos.arkui.componentSnapshot';
import image from '@ohos.multimedia.image';
@Component
export struct MultiSelectDrag {
@Styles normalStyles() {
.borderColor('#E5E5E1')
.opacity(1.0)
}
@Styles selectStyles() {
.borderColor('#ff1d0e04')
.opacity(0.4)
}
@State number1: number[] = [0, 1, 2, 3, 4];
@State number2: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
@State isSelectedGrid: boolean[] = [false, false, false, false, false, false, false, false, false];
@State colors: Color[] =
[Color.Red, Color.Blue, Color.Brown, Color.Gray, Color.Green, Color.Gray, Color.Orange, Color.Pink, Color.Yellow];
@State previewData: DragItemInfo[] = [{}, {}, {}, {}, {}, {}, {}, {}, {}];
@State pixmap: image.PixelMap | undefined = undefined;
@Builder
createGrid() {
Grid() {
ForEach(this.number2, (index: number) => {
GridItem() {
Column()
.backgroundColor(this.colors[index])
.width('100%')
.height(90)
.draggable(false)
.id(`gridItemId${index}`)
}
.selectable(true)
.selected(this.isSelectedGrid[index])
.stateStyles({
normal: this.normalStyles,
selected: this.selectStyles
})
.onClick(() => {
this.isSelectedGrid[index] = !this.isSelectedGrid[index];
if (!this.isSelectedGrid[index]) {
componentSnapshot.get(`gridItemId${index}`, (error: Error, pixmap: image.PixelMap) => {
this.pixmap = pixmap;
this.previewData[index] = {
pixelMap: this.pixmap
};
})
}
})
.dragPreviewOptions({
mode: [DragPreviewMode.ENABLE_DEFAULT_SHADOW, DragPreviewMode.ENABLE_DEFAULT_RADIUS]
}, { isMultiSelectionEnabled: true, defaultAnimationBeforeLifting: true })
.dragPreview(`gridItemId${index}`)
.onDragStart(() => {
})
}, (index: string) => index)
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width(290)
.backgroundColor(0xFAEEE0)
}
build() {
Column() {
this.createGrid();
}
.width('100%')
.height(290)
}
}

View File

@ -848,6 +848,10 @@
"name": "griditem",
"value": "GridItem"
},
{
"name": "multiselect",
"value": "MultiSelect"
},
{
"name": "listitem",
"value": "ListItem"

View File

@ -760,6 +760,10 @@
"name": "griditem",
"value": "GridItem"
},
{
"name": "multiselect",
"value": "MultiSelect"
},
{
"name": "listitem",
"value": "ListItem"

View File

@ -648,6 +648,10 @@
"name": "griditem",
"value": "GridItem"
},
{
"name": "multiselect",
"value": "MultiSelect"
},
{
"name": "listitem",
"value": "ListItem"

View File

@ -3534,6 +3534,15 @@ export default function abilityTest() {
// 滑动slider调整 固定坐标只支持RK3568其他设备需要调整
await driver.drag(660, 600, 660, 0);
await checkButtonAndClickWithID('gridItemId0');
await checkButtonAndClickWithID('gridItemId1');
await checkButtonAndClickWithID('gridItemId3');
await checkButtonAndClickWithID('gridItemId4');
await checkButtonAndDragToTargetWithID('gridItemId0', column);
// 滑动slider调整 固定坐标只支持RK3568其他设备需要调整
await driver.drag(660, 600, 660, 0);
await driver.drag(660, 400, 660, 0);
await checkButtonAndDragToTargetWithID('listItem0', column);
await checkButtonAndDragToTargetWithID('hyperlink', column);
await checkButtonAndDragToTargetWithID('text', column);
@ -3642,7 +3651,7 @@ export default function abilityTest() {
await smallBtn.click();
await driver.delayMs(DELAY_TIME);
await driver.assertComponentExist(ON.text(await manager.getStringValue($r('app.string.custom_smallcircle_prompt'))));
Logger.info(BUNDLE + testName + ' end');
});

View File

@ -43,7 +43,7 @@
| 验证TarBar 进入通用 | 在组件页面 | 点击下方tab通用 | 跳转到通用页面 | 是 | Pass |
| 验证onClick 点击事件 | | 点击200300的坐标 | 正确响应点击,显示点击信息 | 是 | Pass |
| 验证触摸事件 | | 拖动区域(100, 300, 300, 280) | 正确响应拖动 | 是 | Pass |
| 验证拖拽事件 | | 依次拖拽应用图标、GridItem、ListItem、Hyperlink、Text、Image、Video、FormComponent | 正确响应拖动 | 是 | Pass |
| 验证拖拽事件 | | 依次拖拽应用图标、GridItem、MultiSelect、ListItem、Hyperlink、Text、Image、Video、FormComponent | 正确响应拖动 | 是 | Pass |
| 验证组件区域变化事件 | | 调整宽度,高度 | 正确约束小球运动范围 | 是 | Pass |
| 验证SafeArea 安全区域 | 进入SafeArea 安全区域 | 调整安全区域扩展的类型和方向 | 正确显示效果 | 是 | Pass |
| 验证foreground 前景 | | 进入foreground 前景 | 正确显示背景 | 是 | Pass |