Skip to content

Commit 3201ca4

Browse files
MaoXiaooneMaoXiaoone
authored
Merge pull request #65 from mgz0227/dev_2008
优化分组标签、我的设置部分遮挡
2 parents 25de80e + ad87b78 commit 3201ca4

File tree

5 files changed

+225
-79
lines changed

5 files changed

+225
-79
lines changed

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

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
import BookType from '../head/BookType'
2+
import groupTypePanel from './groupTypePanel'
23

34
@Component
45
export default struct groupTypeComponent {
6+
@State globalPositionY: Length = 0
57
@Link bookType: string
68
@Link currentIndex: number
79
@Link groupCoverShow:boolean
8-
build() {
910

11+
build() {
12+
if (this.groupCoverShow){
13+
Stack(){
14+
Rect()
15+
// .fillOpacity(0)
16+
.height('85%')
17+
.width('100%')
18+
.fill('rgba(0, 0, 0, 0.45)')
19+
groupTypePanel({
20+
groupCoverShow:this.groupCoverShow
21+
}).zIndex(9999)
22+
}.alignContent(Alignment.Top)
23+
} else {
1024
Flex(
1125
{
1226
alignItems: ItemAlign.Center,
@@ -66,24 +80,25 @@ export default struct groupTypeComponent {
6680
).onClick(()=>{
6781
this.groupCoverShow = true
6882
})
69-
.bindPopup(this.groupCoverShow, {
70-
builder: this.groupTypePanel,
71-
placement: Placement.Bottom,
72-
// mask:true,
73-
radius:10,
74-
offset: {y:-35},
75-
// mask:{color:'rgba(0,0,0,0.45)'},
76-
enableArrow: false,
77-
// autoCancel:false,
78-
width:'100%',
79-
popupColor:Color.Transparent,
80-
onStateChange: (e) => {
81-
if (!e.isVisible) {
82-
this.groupCoverShow = false;
83-
}
84-
}
85-
})
83+
// .bindPopup(this.groupCoverShow, {
84+
// builder: this.groupTypePanel,
85+
// placement: Placement.Bottom,
86+
// // mask:true,
87+
// radius:10,
88+
// offset: {y:-35},
89+
// // mask:{color:'rgba(0,0,0,0.45)'},
90+
// enableArrow: false,
91+
// // autoCancel:false,
92+
// width:'100%',
93+
// popupColor:Color.Transparent,
94+
// onStateChange: (e) => {
95+
// if (!e.isVisible) {
96+
// this.groupCoverShow = false;
97+
// }
98+
// }
99+
// })
86100
}.margin({ left: 15,bottom:10})
101+
}
87102

88103
}
89104

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@Component
2+
export default struct groupTypePanel{
3+
@Link groupCoverShow:boolean
4+
build() {
5+
Column({
6+
space:15
7+
}){
8+
Flex({
9+
justifyContent:FlexAlign.SpaceBetween,
10+
alignItems:ItemAlign.End
11+
}){
12+
Row({space:12}){
13+
Text('显示分组').fontSize(16).fontWeight(500).lineHeight(24).fontColor('rgba(0, 0, 0, 0.88)')
14+
Text('点击进入').fontSize(12).fontWeight(400).lineHeight(20).fontColor('rgba(0, 0, 0, 0.45)')
15+
}.alignItems(VerticalAlign.Bottom)
16+
Row({space:12}){
17+
Text('管理').fontSize(12).fontWeight(400).lineHeight(20).fontColor($r('app.color.theme_color'))
18+
Image($r('app.media.close')).width(24).height(20).onClick(()=>{
19+
this.groupCoverShow = false
20+
})
21+
}
22+
}
23+
Flex({
24+
direction: FlexDirection.Row, wrap: FlexWrap.Wrap,
25+
justifyContent:FlexAlign.Start
26+
}){
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%')
43+
}
44+
45+
Flex({
46+
justifyContent:FlexAlign.SpaceBetween,
47+
alignItems:ItemAlign.End
48+
}){
49+
Row({space:12}){
50+
Text('隐藏分组').fontSize(16).fontWeight(500).lineHeight(24).fontColor('rgba(0, 0, 0, 0.88)')
51+
Text('点击进入,长按编辑').fontSize(12).fontWeight(400).lineHeight(20).fontColor('rgba(0, 0, 0, 0.45)')
52+
}.alignItems(VerticalAlign.Bottom)
53+
Row({space:8}){
54+
Image($r('app.media.help')).width(20).height(20)
55+
Text('标签锁').fontSize(16).fontWeight(500).lineHeight(24).fontColor('rgba(0, 0, 0, 0.45)')
56+
Toggle({ type: ToggleType.Switch, isOn: false})
57+
.selectedColor("#F60").hoverEffect(HoverEffect.None)
58+
}.alignItems(VerticalAlign.Bottom).justifyContent(FlexAlign.End)
59+
}
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%')
74+
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})
91+
92+
}
93+
}.scrollBar(BarState.Off)
94+
.scrollable(ScrollDirection.Horizontal)
95+
96+
}
97+
.borderRadius({bottomLeft:20,bottomRight:20})
98+
.padding({left:20,right:20,top:12,bottom:20})
99+
.width('100%').backgroundColor(Color.White)
100+
}
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)
108+
}
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})
114+
}
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)
122+
}
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})
128+
}
129+
}

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

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@ struct Main {
4343
new NavItem(3, $r('app.media.MINE_theme'),$r('app.media.MINE_line'), '我的')
4444
]
4545

46-
@State scrollType:MainScrollBar[] = [
47-
new MainScrollBar(false,new Scroller()),
48-
new MainScrollBar(false,new Scroller()),
49-
new MainScrollBar(false,new Scroller()),
50-
new MainScrollBar(false,new Scroller()),
51-
new MainScrollBar(false,new Scroller())
52-
]
46+
// @State scrollType:MainScrollBar[] = [
47+
// new MainScrollBar(false,new Scroller()),
48+
// new MainScrollBar(false,new Scroller()),
49+
// new MainScrollBar(false,new Scroller()),
50+
// new MainScrollBar(false,new Scroller()),
51+
// new MainScrollBar(false,new Scroller())
52+
// ]
5353

5454
build() {
5555
Column() {
@@ -59,16 +59,13 @@ struct Main {
5959
ForEach(this.nav,(item:NavItem) => {
6060
TabContent() {
6161
Column() {
62-
Scroll(this.scrollType[item.index].isScroll) {
63-
if (item.index === 0){
64-
BookShelf()
65-
} else if (item.index === 1){
66-
Find()
67-
} else if (item.index === 2){
68-
Subscription()
69-
}
62+
if (item.index === 0){
63+
BookShelf()
64+
} else if (item.index === 1){
65+
Find()
66+
} else if (item.index === 2){
67+
Subscription()
7068
}
71-
.scrollBar(BarState.Off)
7269
if (item.index === 3){
7370
MyCenter()
7471
}

‎entry/src/main/ets/pages/view/bookShelf/IndexShelf.ets

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -173,56 +173,61 @@ export default struct IndexShelf {
173173
}
174174
}
175175
.padding(15)
176-
177-
if (this.searchValue !== '浏览历史'){
178-
groupTypeComponent({
179-
bookType:this.bookType,
180-
currentIndex:this.currentIndex,
181-
groupCoverShow:this.groupCoverShow
182-
})
183-
}
184-
Refresh({ refreshing: $$this.isRefreshing,builder:this.refreshComponent}) {
185-
Scroll(){
186-
Stack({alignContent:Alignment.Center}) {
187-
if (this.GROUP === '标签'){
188-
if (this.currentIndex === 0){
189-
novelPage({
190-
searchValue:this.searchValue,
191-
currentIndex:0,
192-
isClear:this.isClear,
176+
Stack(){
177+
if (this.searchValue !== '浏览历史'){
178+
groupTypeComponent({
179+
bookType:this.bookType,
180+
currentIndex:this.currentIndex,
181+
groupCoverShow:this.groupCoverShow
182+
}).zIndex(999)
183+
}
184+
Refresh({ refreshing: $$this.isRefreshing,builder:this.refreshComponent}) {
185+
Scroll(){
186+
Stack({alignContent:Alignment.Center}) {
187+
if (this.GROUP === '标签'){
188+
if (this.currentIndex === 0){
189+
novelPage({
190+
searchValue:this.searchValue,
191+
currentIndex:0,
192+
isClear:this.isClear,
193+
EXHIBIT:this.EXHIBIT
194+
})
195+
.zIndex(0)
196+
} else if(this.currentIndex === 1) {
197+
cartoonPage({searchValue:this.searchValue,currentIndex:1,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(1)
198+
} else if(this.currentIndex === 2) {
199+
soundPage({searchValue:this.searchValue,currentIndex:2,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(2)
200+
}
201+
} else {
202+
BookFolder({
193203
EXHIBIT:this.EXHIBIT
194204
})
195-
.zIndex(0)
196-
} else if(this.currentIndex === 1) {
197-
cartoonPage({searchValue:this.searchValue,currentIndex:1,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(1)
198-
} else if(this.currentIndex === 2) {
199-
soundPage({searchValue:this.searchValue,currentIndex:2,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(2)
200205
}
201-
} else {
202-
BookFolder({
203-
EXHIBIT:this.EXHIBIT
204-
})
205206
}
207+
.padding({left:10,right:10})
206208
}
207-
.padding({left:10,right:10})
209+
.align(Alignment.TopStart)
210+
.height('83%')
211+
// .height(this.searchValue==='浏览历史'?'83%':'78%')
212+
.scrollBar(BarState.Off)
208213
}
209-
.align(Alignment.TopStart)
210-
.height(this.searchValue==='浏览历史'?'83%':'78%')
211-
.scrollBar(BarState.Off)
212-
}.onStateChange((refreshStatus: RefreshStatus) =>{
213-
if (refreshStatus === 1 || refreshStatus === 2) {
214-
this.RefreshingTitle = '松开刷新'
215-
} else{
216-
this.RefreshingTitle = '刷新中...'
217-
}
218-
})
219-
.onRefreshing(()=>{
220-
setTimeout(() => {
221-
this.counter++
222-
this.isRefreshing = false
223-
}, 1000)
214+
.margin({top:this.searchValue==='浏览历史'?0:30})
215+
.onStateChange((refreshStatus: RefreshStatus) =>{
216+
if (refreshStatus === 1 || refreshStatus === 2) {
217+
this.RefreshingTitle = '松开刷新'
218+
} else{
219+
this.RefreshingTitle = '刷新中...'
220+
}
221+
})
222+
.onRefreshing(()=>{
223+
setTimeout(() => {
224+
this.counter++
225+
this.isRefreshing = false
226+
}, 1000)
227+
228+
})
229+
}.alignContent(Alignment.Top)
224230

225-
})
226231
}
227232
}
228233

‎entry/src/main/ets/pages/view/myCenter/MyCenter.ets

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ export default struct MyCenter {
2828
new dataItem("清理缓存",3,$r("app.media.my_center_clean_icon")),
2929
new dataItem("文件管理",4,$r("app.media.my_center_file_icon")),
3030
]
31-
31+
@StorageLink('topRectHeight') topRectHeight: number = 0
3232
build() {
3333
Column(){
34-
34+
Blank(this.topRectHeight-20)
3535
//右上角模式图标
3636
Row({space:10}){
3737
//设置图标

0 commit comments

Comments
 (0)