Skip to content

Commit 4900b41

Browse files
MaoXiaooneMaoXiaoone
authored
Merge pull request #66 from mgz0227/dev_2008
分组页可以拖拽、锁定tab
2 parents cf2c8a0 + e82ff59 commit 4900b41

File tree

7 files changed

+264
-86
lines changed

7 files changed

+264
-86
lines changed

‎entry/src/main/ets/componets/common/customizeDialog.ets

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* 自定义标题和内容
3+
*/
4+
@CustomDialog
5+
export default struct customizeDialogExample {
6+
7+
controller?: CustomDialogController
8+
confirm: () => void = () => {
9+
}
10+
@Prop title:string = '标签锁'
11+
@Prop content:string = '长按底部tab栏书架图标可锁定分组标签栏，再次长按解锁，锁定后左右滑动将直接切换小说，漫画，有声书分组大类'
12+
13+
build() {
14+
Column() {
15+
Text(`${this.title}` ).fontWeight(600).maxLines(1).minFontSize(12).maxFontSize(20).margin({ top: 20, bottom: 10 })
16+
Row({
17+
space:8
18+
}){
19+
Text(this.content)
20+
.width('70%')
21+
.fontColor('rgba(0, 0, 0, 0.45)').fontSize(14).fontWeight(400).lineHeight(22)
22+
}
23+
Row({space:24}) {
24+
Text('确认')
25+
.onClick(() => {
26+
if (this.controller != undefined) {
27+
this.controller.close()
28+
// this.confirm()
29+
}
30+
})
31+
.borderRadius(15)
32+
.padding({left:30,right:30,top:10,bottom:10})
33+
.fontColor(Color.White)
34+
.backgroundColor($r('app.color.theme_color'))
35+
}.padding({top:20,bottom:20})
36+
}
37+
}
38+
}

‎entry/src/main/ets/componets/group/groupTypePanel.ets

Lines changed: 181 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
import { updateAppData } from '../../storage/appData'
2+
import customizeDialogExample from '../common/customizeDialog'
3+
import { showMessage } from '../common/promptShow'
4+
15
@Component
26
export default struct groupTypePanel{
37
@Link groupCoverShow:boolean
8+
@State isShowIcon:boolean = false
9+
@State groupType:string[] = ['分组','全部','未分组','本地','书单']
10+
@State groupTypes:string[] = []
11+
@State hideGroupType:string[] = ['游戏','玄幻','都市', '历史', '军事', '科幻', '灵异', '二次元', '耽美', '同人']
12+
@StorageProp('APP_INDEX_SCROLLABLE') APP_INDEX_SCROLLABLE: boolean = true
413
build() {
514
Column({
615
space:15
@@ -14,32 +23,68 @@ export default struct groupTypePanel{
1423
Text('点击进入').fontSize(12).fontWeight(400).lineHeight(20).fontColor('rgba(0, 0, 0, 0.45)')
1524
}.alignItems(VerticalAlign.Bottom)
1625
Row({space:12}){
17-
Text('管理').fontSize(12).fontWeight(400).lineHeight(20).fontColor($r('app.color.theme_color'))
26+
Text(this.isShowIcon?'完成':'管理').fontSize(12).fontWeight(400).lineHeight(20).fontColor($r('app.color.theme_color'))
27+
.onClick(()=>{
28+
this.isShowIcon = !this.isShowIcon
29+
})
1830
Image($r('app.media.close')).width(24).height(20).onClick(()=>{
1931
this.groupCoverShow = false
32+
this.isShowIcon = false
2033
})
2134
}
2235
}
2336
Flex({
2437
direction: FlexDirection.Row, wrap: FlexWrap.Wrap,
2538
justifyContent:FlexAlign.Start
2639
}){
27-
Row(){
28-
this.GroupType()
29-
}.width('25%')
30-
Row(){
31-
this.GroupType1('全部')
32-
//后续添加右上角图
33-
}.width('25%')
34-
Row(){
35-
this.GroupType1('未分组')
36-
}.width('25%')
37-
Row(){
38-
this.GroupType1('本地')
39-
}.width('25%')
40-
Row(){
41-
this.GroupType1('书单')
42-
}.width('25%')
40+
ForEach(this.groupTypes.length > 0?this.groupTypes:this.groupType,(item:string,index:number)=>{
41+
if (index === 0) {
42+
Row(){
43+
this.GroupTypeColor(item)
44+
if (this.isShowIcon) {
45+
Image($r('app.media.sort')).width(12).height(12).offset({x:-20,y:-20})
46+
}
47+
}.width('25%')
48+
.onTouch((event: TouchEvent) => {
49+
if (event.type === TouchType.Down) {
50+
this.dragIndex = index // 获取当前拖拽子组件的索引
51+
console.info('onTouch' + this.dragIndex)
52+
}
53+
})
54+
.draggable(this.isShowIcon)
55+
.onDragStart(()=>{
56+
console.log('onDragStart')
57+
})
58+
.onDrop((event: DragEvent, extraParams: string) => {
59+
console.log('onDrop')
60+
this.changeIndex(this.dragIndex, index,0)
61+
this.groupTypes = []
62+
})
63+
64+
} else {
65+
Row(){
66+
this.GroupType(item)
67+
if (this.isShowIcon) {
68+
Image($r('app.media.sort')).width(12).height(12).offset({x:-20,y:-20})
69+
}
70+
}.width('25%')
71+
.draggable(this.isShowIcon)
72+
.onTouch((event: TouchEvent) => {
73+
if (event.type === TouchType.Down) {
74+
this.dragIndex = index // 获取当前拖拽子组件的索引
75+
console.info('onTouch' + this.dragIndex)
76+
}
77+
})
78+
.onDragStart(()=>{
79+
console.log('onDragStart')
80+
})
81+
.onDrop((event: DragEvent, extraParams: string) => {
82+
console.log('onDrop')
83+
this.changeIndex(this.dragIndex, index,0)
84+
})
85+
}
86+
})
87+
4388
}
4489

4590
Flex({
@@ -51,79 +96,140 @@ export default struct groupTypePanel{
5196
Text('点击进入,长按编辑').fontSize(12).fontWeight(400).lineHeight(20).fontColor('rgba(0, 0, 0, 0.45)')
5297
}.alignItems(VerticalAlign.Bottom)
5398
Row({space:8}){
54-
Image($r('app.media.help')).width(20).height(20)
99+
Image($r('app.media.help')).width(20).height(20).onClick(()=>{
100+
this.tagLockDialog?.open()
101+
})
55102
Text('标签锁').fontSize(16).fontWeight(500).lineHeight(24).fontColor('rgba(0, 0, 0, 0.45)')
56-
Toggle({ type: ToggleType.Switch, isOn: false})
103+
Toggle({ type: ToggleType.Switch, isOn: $$this.APP_INDEX_SCROLLABLE})
57104
.selectedColor("#F60").hoverEffect(HoverEffect.None)
105+
.onChange(()=>{
106+
updateAppData(this.APP_INDEX_SCROLLABLE)
107+
showMessage(this.APP_INDEX_SCROLLABLE?'开启标签锁':'关闭标签锁')
108+
})
58109
}.alignItems(VerticalAlign.Bottom).justifyContent(FlexAlign.End)
59110
}
60-
Scroll(){
61-
if (true){
62-
Flex({
63-
direction: FlexDirection.Row
64-
}){
65-
Row(){
66-
this.GroupType1('游戏')
67-
}.width('25%')
68-
Row(){
69-
this.GroupType1('未分组')
70-
}.width('25%')
71-
Row(){
72-
this.GroupType1('本地')
73-
}.width('25%')
111+
if (this.hideGroupType.length > 0){
112+
Flex({
113+
direction: FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.Center
114+
}){
115+
ForEach(this.hideGroupType,(item:string,index:number)=>{
74116
Row(){
75-
this.GroupType1('书单')
76-
}.width('25%')
77-
Row(){
78-
this.GroupType1('书单')
79-
}.width('25%')
80-
}
81-
} else {
82-
Flex({
83-
justifyContent:FlexAlign.Center
84-
}){
85-
Text('暂无隐藏分组').fontSize(12).fontWeight(400).fontColor('rgba(0, 0, 0, 0.45)')
86-
}
87-
.borderRadius(4)
88-
.width('100%')
89-
.backgroundColor('rgba(0, 0, 0, 0.04)')
90-
.padding({top:6,bottom:6})
117+
this.GroupType(item)
118+
if (this.isShowIcon) {
119+
Image($r('app.media.add_new_fill')).width(12).height(12).offset({x:-20,y:-20})
120+
}
121+
}
122+
.onTouch((event: TouchEvent) => {
123+
if (event.type === TouchType.Down) {
124+
this.dragIndex = index // 获取当前拖拽子组件的索引
125+
console.info('onTouch' + this.dragIndex)
126+
}
127+
})
128+
.draggable(this.isShowIcon)
129+
.onDragStart(()=>{
130+
console.log('onDragStart')
131+
})
132+
.onDrop((event: DragEvent, extraParams: string) => {
133+
console.log('onDrop')
134+
this.changeIndex(this.dragIndex, index,1)
135+
})
136+
.width('25%')
137+
})
138+
}
91139

140+
} else {
141+
Flex({
142+
justifyContent:FlexAlign.Center
143+
}){
144+
Text('暂无隐藏分组').fontSize(12).fontWeight(400).fontColor('rgba(0, 0, 0, 0.45)')
92145
}
93-
}.scrollBar(BarState.Off)
94-
.scrollable(ScrollDirection.Horizontal)
146+
.borderRadius(4)
147+
.width('100%')
148+
.backgroundColor('rgba(0, 0, 0, 0.04)')
149+
.padding({top:6,bottom:6})
150+
151+
}
95152

96153
}
97154
.borderRadius({bottomLeft:20,bottomRight:20})
98155
.padding({left:20,right:20,top:12,bottom:20})
99156
.width('100%').backgroundColor(Color.White)
100157
}
101-
@Builder GroupType(){
102-
Row(){
103-
Text('分组').fontWeight(500).fontSize(12).textOverflow({
104-
overflow:TextOverflow.Ellipsis
105-
}).ellipsisMode(EllipsisMode.END)
106-
.maxLines(1).fontColor($r('app.color.theme_color'))
107-
.textAlign(TextAlign.Center)
158+
@State tagLockContent:string = '长按底部tab栏书架图标可锁定分组标签栏，再次长按解锁，锁定后左右滑动将直接切换小说，漫画，有声书分组大类。'
159+
tagLockDialog: CustomDialogController | null = new CustomDialogController({
160+
builder: customizeDialogExample({
161+
confirm: ()=> { this.onAccept() },
162+
title: '标签锁',
163+
content:this.tagLockContent
164+
}),
165+
width:'90%',
166+
autoCancel: true,
167+
alignment: DialogAlignment.Center,
168+
// offset: { dx: 0, dy: '-40%' },
169+
gridCount: 4,
170+
customStyle: false,
171+
cornerRadius: 25
172+
})
173+
174+
onAccept() {
175+
this.tagLockDialog?.close()
176+
}
177+
178+
@State dragIndex: number = 0
179+
changeIndex(index1: number, index2: number,type:number = 2) { // 交换数组位置
180+
//@State hideGroupType:string[] = ['游戏','玄幻','都市', '历史', '军事', '科幻', '灵异', '二次元', '耽美', '同人']
181+
//hideGroupType数组位置交换
182+
if (!this.isShowIcon) {
183+
showMessage('请在管理状态下拖到改变顺序')
184+
return
185+
}
186+
console.log('changeIndex' + index1 + ',' + index2)
187+
switch (type){
188+
case 0:
189+
let temp1 = this.groupType[index1];
190+
this.groupType[index1] = this.groupType[index2];
191+
this.groupType[index2] = temp1;break;
192+
case 1:
193+
let temp = this.hideGroupType[index1];
194+
this.hideGroupType[index1] = this.hideGroupType[index2];
195+
this.hideGroupType[index2] = temp;break;
108196
}
109-
.margin({ right: 16, bottom: 16 })
110-
.justifyContent(FlexAlign.Center)
111-
.alignItems(VerticalAlign.Center)
112-
.width(68)
113-
.backgroundColor('rgba(0, 0, 0, 0.04)').padding({left:16,right:16,top:6,bottom:6})
114197
}
115-
@Builder GroupType1(title:string){
116-
Row(){
117-
Text(title).fontWeight(500).fontSize(12).textOverflow({
118-
overflow:TextOverflow.Ellipsis
119-
}).ellipsisMode(EllipsisMode.END)
120-
.maxLines(1).fontColor(Color.Black)
121-
.textAlign(TextAlign.Center)
198+
@Builder GroupTypeColor(title:string){
199+
Column(){
200+
Row(){
201+
Text(title).fontWeight(500).fontSize(12).textOverflow({
202+
overflow:TextOverflow.Ellipsis
203+
}).ellipsisMode(EllipsisMode.END)
204+
.maxLines(1).fontColor($r('app.color.theme_color'))
205+
.textAlign(TextAlign.Center)
206+
}
207+
.margin({ right: 16, bottom: 16 })
208+
.justifyContent(FlexAlign.Center)
209+
.alignItems(VerticalAlign.Center)
210+
.width(68)
211+
.backgroundColor('rgba(252, 121, 0, 0.12)')
212+
.padding({left:16,right:16,top:6,bottom:6})
122213
}
123-
124-
.justifyContent(FlexAlign.Center)
125-
.alignItems(VerticalAlign.Center)
126-
.width(68)
127-
.backgroundColor('rgba(0, 0, 0, 0.04)').padding({left:16,right:16,top:6,bottom:6})
214+
}
215+
@Builder GroupType(title:string){
216+
Column(){
217+
Row(){
218+
Text(title).fontWeight(500).fontSize(12).textOverflow({
219+
overflow:TextOverflow.Ellipsis
220+
}).ellipsisMode(EllipsisMode.END)
221+
.maxLines(1).fontColor(Color.Black)
222+
.textAlign(TextAlign.Center)
223+
// Image($r('app.media.sort')).width(12).height(12).offset({x:18,y:-12})
224+
}
225+
// .backgroundImage($r('app.media.sort'))
226+
// .backgroundImagePosition({x:-12,y:12})
227+
// .backgroundImageSize({width:'100%',height:12})
228+
.margin({ right: 16, bottom: 16 })
229+
.justifyContent(FlexAlign.Center)
230+
.alignItems(VerticalAlign.Center)
231+
.width(68)
232+
.backgroundColor('rgba(0, 0, 0, 0.04)').padding({left:16,right:16,top:6,bottom:6})
233+
}
128234
}
129235
}

‎entry/src/main/ets/pages/Index.ets

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { showMessage } from '../componets/common/promptShow'
12
import ReadShow from '../componets/common/ReadShow'
23
import { MainScrollBar, NavItem } from '../componets/dataList/type'
4+
import { updateAppData } from '../storage/appData'
35
import { initBookListData } from '../storage/bookListData'
46
import BookShelf from './view/BookShelf'
57
import Find from './view/Find'
@@ -14,7 +16,7 @@ struct Main {
1416
@State isShow: boolean = true
1517
@StorageLink('bottomRectHeight') bottomRectHeight: number = 0
1618
@StorageLink('topRectHeight') topRectHeight: number = 0
17-
19+
@StorageProp('APP_INDEX_SCROLLABLE') APP_INDEX_SCROLLABLE: boolean = true
1820
onPageShow(): void {
1921
// initBookListData()
2022
setTimeout(()=>{
@@ -24,14 +26,23 @@ struct Main {
2426
}
2527

2628
@Builder TabBuilder(index = 0, name: string,icon_select: Resource,unselected: Resource) {
27-
Flex({
28-
direction:FlexDirection.Column,
29-
alignItems:ItemAlign.Center,
30-
justifyContent:FlexAlign.Center
31-
}){
32-
Image(this.currentTabIndex === index?icon_select:unselected).height(25)
33-
Text(name).fontSize(11).margin(5).fontColor(this.currentTabIndex === index ?'rgb(255,119, 50)' : '#000000')
34-
}
29+
Column(){
30+
Flex({
31+
direction:FlexDirection.Column,
32+
alignItems:ItemAlign.Center,
33+
justifyContent:FlexAlign.Center
34+
}){
35+
Image(this.currentTabIndex === index?icon_select:unselected).height(25)
36+
Text(name).fontSize(11).margin(5).fontColor(this.currentTabIndex === index ?'rgb(255,119, 50)' : '#000000')
37+
}
38+
}.gesture(
39+
LongPressGesture({ repeat: index === 0,duration:1000 })
40+
.onAction((event: GestureEvent) => {
41+
console.log('onAction' + event.repeat)
42+
if (event.repeat) {
43+
updateAppData(!this.APP_INDEX_SCROLLABLE)
44+
showMessage(this.APP_INDEX_SCROLLABLE?'开启标签锁':'关闭标签锁')}}))
45+
.width('100%')
3546
.margin({top:4})
3647
.height("100%")
3748
}
@@ -75,7 +86,7 @@ struct Main {
7586
)
7687
})
7788
}
78-
89+
.scrollable(!this.APP_INDEX_SCROLLABLE)
7990
.padding({bottom:this.bottomRectHeight})
8091
.backgroundColor('rgba(214, 213, 213, 0.7)')
8192
.onChange((index) => {

0 commit comments

Comments
 (0)