developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yuzhilin
d2302f00 1 parent 8045b03d

纯滑动事件处理拖拽

Inline Side-by-side
Showing 2 changed files with 239 additions and 79 deletions
import { TopNavDTO } from 'wdBean';
import curves from '@ohos.curves';
const INDEX_SETTING_TITLE: string = '首页设置'
const INDEX_SETTING_SUBTITLE: string = '将指定频道设置为首页'
const MY_CHANNEL: string = '我的频道'
const EDIT_TEXT: string = '编辑'
const EDIT_DOWN: string = '完成'
const MY_CHANNEL_TIP1: string = '点击进入频道'
const MY_CHANNEL_TIP2: string = '拖动调整频道顺序'
const MORE_CHANNEL: string = '更多频道'
const LOCAL_CHANNEL: string = '地方频道'
@CustomDialog
struct ChannelDialog {
@State dragItem: number = -1
@State item: number = -1
private dragRefOffsetX: number = 0
private dragRefOffsetY: number = 0
@State offsetX: number = 0
@State offsetY: number = 0
private FIX_VP_X: number = 80
private FIX_VP_Y: number = 48
@State indexSettingTabIndex: number = 0
@State isEditIng: boolean = false
@State currentTopNavSelectedItem: TopNavDTO = {} as TopNavDTO
@Link currentTopNavSelectedIndex: number
@Link myChannelList: TopNavDTO[]
@Link moreChannelList: TopNavDTO[]
... ... @@ -20,48 +33,153 @@ struct ChannelDialog {
controller?: CustomDialogController
confirm: (index: number) => void = () => {
}
changeChannelIndex : (index1:number, index2:number) => void = ()=>{}
myChannelItemEditHandle = (index: number): void => {
let item = this.myChannelList.splice(index, 1)[0]
if (item.moreChannel === '1') {
this.moreChannelList.unshift(item)
}
if (item.localChannel === '1') {
this.localChannelList.unshift(item)
changeChannelIndex: (index1: number, index2: number) => void = () => {
}
delChannelItem: (index: number) => void = () => {
}
addChannelItem: (item: TopNavDTO) => void = () => {
}
aboutToAppear() {
this.currentTopNavSelectedItem = this.myChannelList[this.currentTopNavSelectedIndex]
}
itemMove(index: number, newIndex: number): void {
let targetItem = this.myChannelList[newIndex]
if (!(targetItem?.headlinesOn === 1 || targetItem?.movePermitted === 0 || targetItem?.homeChannel === '1')) {
this.changeChannelIndex(index, newIndex)
if (index <= this.currentTopNavSelectedIndex || newIndex <= this.currentTopNavSelectedIndex) {
// this.currentTopNavSelectedIndex = this.myChannelList.findIndex(ele => ele.channelId === currentTopNavSelectedItem.channelId)
}
}
}
@Builder
pixelMapBuilder(item: TopNavDTO, index: number) { //拖拽过程样式
Row() {
Row() {
Text(item.name)
.fontSize(14)
.fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
//向下滑
down(index: number): void {
console.info(`向下滑`)
this.offsetY -= this.FIX_VP_Y
this.dragRefOffsetY += this.FIX_VP_Y
this.itemMove(index, index + 4)
}
if (this.isEditIng && item.myChannel !== '1') {
Image($r('app.media.icon_audio_close'))
.width(12)
.margin({ left: 1 })
}
//向下滑(右下角为空)
down2(index: number): void {
this.offsetY -= this.FIX_VP_Y
this.dragRefOffsetY += this.FIX_VP_Y
this.itemMove(index, index + 4)
}
//向上滑
up(index: number): void {
console.info(`向上滑`)
this.offsetY += this.FIX_VP_Y
this.dragRefOffsetY -= this.FIX_VP_Y
this.itemMove(index, index - 4)
}
//向左滑
left(index: number): void {
console.info(`向左滑`)
this.offsetX += this.FIX_VP_X
this.dragRefOffsetX -= this.FIX_VP_X
this.itemMove(index, index - 1)
}
//向右滑
right(index: number): void {
console.info(`向右滑`)
this.offsetX -= this.FIX_VP_X
this.dragRefOffsetX += this.FIX_VP_X
this.itemMove(index, index + 1)
}
//向右下滑
lowerRight(index: number): void {
console.info(`向右下滑`)
this.offsetX -= this.FIX_VP_X
this.dragRefOffsetX += this.FIX_VP_X
this.offsetY -= this.FIX_VP_Y
this.dragRefOffsetY += this.FIX_VP_Y
this.itemMove(index, index + 5)
}
//向右上滑
upperRight(index: number): void {
console.info(`向右上滑`)
this.offsetX -= this.FIX_VP_X
this.dragRefOffsetX += this.FIX_VP_X
this.offsetY += this.FIX_VP_Y
this.dragRefOffsetY -= this.FIX_VP_Y
this.itemMove(index, index - 3)
}
//向左下滑
lowerLeft(index: number): void {
console.info(`向左下滑`)
this.offsetX += this.FIX_VP_X
this.dragRefOffsetX -= this.FIX_VP_X
this.offsetY -= this.FIX_VP_Y
this.dragRefOffsetY += this.FIX_VP_Y
this.itemMove(index, index + 3)
}
//向左上滑
upperLeft(index: number): void {
console.info(`向左上滑`)
this.offsetX += this.FIX_VP_X
this.dragRefOffsetX -= this.FIX_VP_X
this.offsetY += this.FIX_VP_Y
this.dragRefOffsetY -= this.FIX_VP_Y
this.itemMove(index, index - 5)
}
handleAnimationTo(item: TopNavDTO, event: GestureEvent) {
let index = this.myChannelList.findIndex(ele => ele.num === this.dragItem)
if (!(item.headlinesOn === 1 || item.movePermitted === 0 || item.homeChannel === '1') && this.isEditIng) {
this.offsetY = event.offsetY - this.dragRefOffsetY
this.offsetX = event.offsetX - this.dragRefOffsetX
if (this.offsetY >= this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)
) {
//向下滑
this.down(index)
} else if (this.offsetY <= -this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)
) {
//向上滑
this.up(index)
} else if (this.offsetX >= this.FIX_VP_X / 2 && (this.offsetY <= 20 && this.offsetY >= -20)
) {
//向右滑
this.right(index)
} else if (this.offsetX <= -this.FIX_VP_X / 2 && (this.offsetY <= 20 && this.offsetY >= -20)
) {
//向左滑
this.left(index)
} else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
) {
//向右下滑
this.lowerRight(index)
} else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2
) {
//向右上滑
this.upperRight(index)
} else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
) {
//向左下滑
this.lowerLeft(index)
} else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2
) {
//向左上滑
this.upperLeft(index)
} else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
) {
//向右下滑(右下角为空)
this.down2(index)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
}
.width('23%')
.height(40)
.border({
width: item.homeChannel === '1' ? 0 : 1,
color: '#EDEDED',
radius: 3
})
}
build() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Image($r('app.media.icon_ren_min_ri_bao'))
.width(72)
... ... @@ -73,7 +191,7 @@ struct ChannelDialog {
})
}
.width('100%')
.padding({ top: 30, bottom: 10 })
.padding({ bottom: 10 })
List() {
... ... @@ -87,6 +205,7 @@ struct ChannelDialog {
Text(INDEX_SETTING_SUBTITLE)
.fontSize(12)
.fontWeight(400)
.fontColor('#222222')
}
.width('100%')
.margin({ top: 22, bottom: 16 })
... ... @@ -128,9 +247,17 @@ struct ChannelDialog {
ListItem() {
Row() {
Text(MY_CHANNEL)
.fontSize(16)
.fontWeight(600)
Row() {
Text(MY_CHANNEL)
.fontSize(16)
.fontWeight(600)
.margin({ right: 4 })
Text(!this.isEditIng ? MY_CHANNEL_TIP1 : MY_CHANNEL_TIP2)
.fontSize(12)
.fontWeight(400)
.fontColor('#222222')
}
Text(this.isEditIng ? EDIT_DOWN : EDIT_TEXT)
.fontSize(14)
.fontColor('#ED2800')
... ... @@ -151,7 +278,7 @@ struct ChannelDialog {
Row() {
Text(item.name)
.fontSize(14)
.fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
.fontColor(this.currentTopNavSelectedItem.channelId === item.channelId ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
if (this.isEditIng && item.myChannel !== '1') {
Image($r('app.media.icon_audio_close'))
... ... @@ -162,15 +289,14 @@ struct ChannelDialog {
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '')
.backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
.onClick(() => {
if (this.isEditIng) {
if (item.myChannel !== '1') {
this.myChannelItemEditHandle(index)
this.delChannelItem(index)
}
} else {
this.confirm(index)
this.currentTopNavSelectedIndex = index
this.controller?.close()
}
})
... ... @@ -182,6 +308,33 @@ struct ChannelDialog {
color: '#EDEDED',
radius: 3
})
.zIndex(this.dragItem == item.num ? 1 : 0)
.translate(this.dragItem == item.num ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 })
.gesture(
GestureGroup(GestureMode.Sequence,
PanGesture({ fingers: 1, direction: null, distance: 0 })
.onActionStart((event: GestureEvent) => {
this.dragItem = item.num
this.dragRefOffsetX = 0
this.dragRefOffsetY = 0
})
.onActionUpdate((event: GestureEvent) => {
animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
this.handleAnimationTo(item, event)
})
})
.onActionEnd((event: GestureEvent) => {
animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
this.dragItem = -1
})
})
)
.onCancel(() => {
animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
this.dragItem = -1
})
}))
}, (item: TopNavDTO) => JSON.stringify(item))
}
.width('100%')
... ... @@ -189,22 +342,7 @@ struct ChannelDialog {
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(8)
.rowsGap(8)
.height(Math.ceil(this.myChannelList.length / 4 ) * 48)
.editMode(this.isEditIng)
.supportAnimation(true) //设置Grid是否开启拖拽补位动画
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
if(this.myChannelList[itemIndex].headlinesOn===1 || this.myChannelList[itemIndex].movePermitted===0){
return
}else{
return this.pixelMapBuilder(this.myChannelList[itemIndex], itemIndex) //设置拖拽过程中显示的元素。
}
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
if (!isSuccess || insertIndex >= this.myChannelList.length || this.myChannelList[insertIndex].headlinesOn===1 || this.myChannelList[insertIndex].movePermitted===0) {
return
}
this.changeChannelIndex(itemIndex,insertIndex)
})
.height(Math.ceil(this.myChannelList.length / 4) * 48)
}
//更多频道列表
... ... @@ -233,7 +371,7 @@ struct ChannelDialog {
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.myChannelList.push(this.moreChannelList.splice(index, 1)[0])
this.addChannelItem(this.moreChannelList.splice(index, 1)[0])
})
}
.width(80)
... ... @@ -277,7 +415,7 @@ struct ChannelDialog {
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.myChannelList.push(this.localChannelList.splice(index, 1)[0])
this.addChannelItem(this.localChannelList.splice(index, 1)[0])
})
}
.width(80)
... ... @@ -295,9 +433,8 @@ struct ChannelDialog {
}
}.width('100%').height('100%')
}
.padding(15)
.padding({ top: 40, right: 15, bottom: 20, left: 15 })
.backgroundColor('#ffffff')
}
}
... ... @@ -305,18 +442,42 @@ struct ChannelDialog {
// @Entry
@Component
struct ChannelSubscriptionLayout {
changeTab: (index: number) => void = () => {
}
@State indexSettingArray: string [] = ['推荐', '热点']
//当前选中的频道
@Link currentTopNavSelectedIndex: number;
@Link myChannelList: TopNavDTO []
@Link moreChannelList: TopNavDTO []
@Link localChannelList: TopNavDTO []
@Link @Watch('onChannelIdsUpdate') channelIds: number []
changeTab: (index: number) => void = () => {
}
//频道弹窗点击切换频道
onAccept = (index: number) => {
console.log(`onAccept${index}`)
this.changeTab(index)
}
//交换我的频道数组中的位置
changeChannelIndex = (index1: number, index2: number) => {
let tmp = this.myChannelList.splice(index1, 1)
let channelIdTmp = this.channelIds.splice(index1, 1)
this.myChannelList.splice(index2, 0, tmp[0])
this.channelIds.splice(index2, 0, channelIdTmp[0])
}
//删除频道
delChannelItem = (index: number) => {
let item = this.myChannelList.splice(index, 1)[0]
this.channelIds.splice(index, 1)
if (item.moreChannel === '1') {
this.moreChannelList.unshift(item)
}
if (item.localChannel === '1') {
this.localChannelList.unshift(item)
}
}
// 添加频道
addChannelItem = (item: TopNavDTO) => {
this.channelIds.push(item.channelId)
this.myChannelList.push(item)
}
// @State currentTopNavSelectedIndex: number = 0
// @State topNavList: TopNavDTO [] = [
// {
... ... @@ -1831,22 +1992,14 @@ struct ChannelSubscriptionLayout {
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
confirm: this.onAccept,
changeChannelIndex: this.changeChannelIndex
changeChannelIndex: this.changeChannelIndex,
delChannelItem: this.delChannelItem,
addChannelItem: this.addChannelItem
}),
alignment: DialogAlignment.TopEnd,
customStyle: true,
})
changeChannelIndex(index1:number, index2:number) { //交换数组中的位置
const temp = this.myChannelList[index1];
if (index1 > index2) {
this.myChannelList.splice(index2, 0, temp);
this.myChannelList.splice(index1 + 1, 1);
} else {
this.myChannelList.splice(index2 + 1, 0, temp);
this.myChannelList.splice(index1, 1);
}
}
// topNavListHandle() {
// let defaultMyChannelList: TopNavDTO[] = []
// let handledTopNavList = [...this.topNavList]
... ... @@ -1896,8 +2049,13 @@ struct ChannelSubscriptionLayout {
// })
// }
onChannelIdsUpdate(){
AppStorage.SetOrCreate('channelIds', this.channelIds.join(','));
console.log(`AppStorage.get('channelIds')${AppStorage.get('channelIds')}`)
}
aboutToAppear() {
console.log(`myChannelListzz${this.channelIds}}`)
// this.topNavListHandle()
}
... ...
... ... @@ -68,6 +68,7 @@ export struct TopNavigationComponent {
if (item.myChannel === '1') {
this.myChannelList.push(item)
this.channelIds.push(item.channelId)
}
if (item.moreChannel === '1') {
this.moreChannelList.push(item)
... ... @@ -81,6 +82,7 @@ export struct TopNavigationComponent {
isBroadcast (item: TopNavDTO) {
return item.name === '播报'
}
build() {
Column() {
// 顶部搜索、日报logo、早晚报
... ... @@ -208,15 +210,15 @@ export struct TopNavigationComponent {
})
// 分类列表最右侧频道设置
ChannelSubscriptionLayout({
changeTab: (index) => {
this.tabsController.changeIndex(index)
},
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
currentTopNavSelectedIndex: $currentTopNavSelectedIndex
channelIds: $channelIds,
changeTab: (index) => {
this.tabsController.changeIndex(index)
}
})
// ChannelSubscriptionLayout()
}
}
... ...