Skip to content

Commit

Permalink
优化分组标签、我的设置部分遮挡
Browse files Browse the repository at this point in the history 
优化分组标签、我的设置部分遮挡
  • Loading branch information
@MaoXiaoone
MaoXiaoone committed May 18, 2024
1 parent a46c65e commit ad87b78
Show file tree
Hide file tree
Showing 5 changed files with 225 additions and 79 deletions.
51 changes: 33 additions & 18 deletions entry/src/main/ets/componets/group/GroupType.ets
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
import BookType from '../head/BookType'
import groupTypePanel from './groupTypePanel'

@Component
export default struct groupTypeComponent {
@State globalPositionY: Length = 0
@Link bookType: string
@Link currentIndex: number
@Link groupCoverShow:boolean
build() {

build() {
if (this.groupCoverShow){
Stack(){
Rect()
// .fillOpacity(0)
.height('85%')
.width('100%')
.fill('rgba(0, 0, 0, 0.45)')
groupTypePanel({
groupCoverShow:this.groupCoverShow
}).zIndex(9999)
}.alignContent(Alignment.Top)
} else {
Flex(
{
alignItems: ItemAlign.Center,
Expand Down Expand Up @@ -66,24 +80,25 @@ export default struct groupTypeComponent {
).onClick(()=>{
this.groupCoverShow = true
})
.bindPopup(this.groupCoverShow, {
builder: this.groupTypePanel,
placement: Placement.Bottom,
// mask:true,
radius:10,
offset: {y:-35},
// mask:{color:'rgba(0,0,0,0.45)'},
enableArrow: false,
// autoCancel:false,
width:'100%',
popupColor:Color.Transparent,
onStateChange: (e) => {
if (!e.isVisible) {
this.groupCoverShow = false;
}
}
})
// .bindPopup(this.groupCoverShow, {
// builder: this.groupTypePanel,
// placement: Placement.Bottom,
// // mask:true,
// radius:10,
// offset: {y:-35},
// // mask:{color:'rgba(0,0,0,0.45)'},
// enableArrow: false,
// // autoCancel:false,
// width:'100%',
// popupColor:Color.Transparent,
// onStateChange: (e) => {
// if (!e.isVisible) {
// this.groupCoverShow = false;
// }
// }
// })
}.margin({ left: 15,bottom:10})
}

}

Expand Down
129 changes: 129 additions & 0 deletions entry/src/main/ets/componets/group/groupTypePanel.ets
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
@Component
export default struct groupTypePanel{
@Link groupCoverShow:boolean
build() {
Column({
space:15
}){
Flex({
justifyContent:FlexAlign.SpaceBetween,
alignItems:ItemAlign.End
}){
Row({space:12}){
Text('显示分组').fontSize(16).fontWeight(500).lineHeight(24).fontColor('rgba(0, 0, 0, 0.88)')
Text('点击进入').fontSize(12).fontWeight(400).lineHeight(20).fontColor('rgba(0, 0, 0, 0.45)')
}.alignItems(VerticalAlign.Bottom)
Row({space:12}){
Text('管理').fontSize(12).fontWeight(400).lineHeight(20).fontColor($r('app.color.theme_color'))
Image($r('app.media.close')).width(24).height(20).onClick(()=>{
this.groupCoverShow = false
})
}
}
Flex({
direction: FlexDirection.Row, wrap: FlexWrap.Wrap,
justifyContent:FlexAlign.Start
}){
Row(){
this.GroupType()
}.width('25%')
Row(){
this.GroupType1('全部')
//后续添加右上角图
}.width('25%')
Row(){
this.GroupType1('未分组')
}.width('25%')
Row(){
this.GroupType1('本地')
}.width('25%')
Row(){
this.GroupType1('书单')
}.width('25%')
}

Flex({
justifyContent:FlexAlign.SpaceBetween,
alignItems:ItemAlign.End
}){
Row({space:12}){
Text('隐藏分组').fontSize(16).fontWeight(500).lineHeight(24).fontColor('rgba(0, 0, 0, 0.88)')
Text('点击进入,长按编辑').fontSize(12).fontWeight(400).lineHeight(20).fontColor('rgba(0, 0, 0, 0.45)')
}.alignItems(VerticalAlign.Bottom)
Row({space:8}){
Image($r('app.media.help')).width(20).height(20)
Text('标签锁').fontSize(16).fontWeight(500).lineHeight(24).fontColor('rgba(0, 0, 0, 0.45)')
Toggle({ type: ToggleType.Switch, isOn: false})
.selectedColor("#F60").hoverEffect(HoverEffect.None)
}.alignItems(VerticalAlign.Bottom).justifyContent(FlexAlign.End)
}
Scroll(){
if (true){
Flex({
direction: FlexDirection.Row
}){
Row(){
this.GroupType1('游戏')
}.width('25%')
Row(){
this.GroupType1('未分组')
}.width('25%')
Row(){
this.GroupType1('本地')
}.width('25%')
Row(){
this.GroupType1('书单')
}.width('25%')
Row(){
this.GroupType1('书单')
}.width('25%')
}
} else {
Flex({
justifyContent:FlexAlign.Center
}){
Text('暂无隐藏分组').fontSize(12).fontWeight(400).fontColor('rgba(0, 0, 0, 0.45)')
}
.borderRadius(4)
.width('100%')
.backgroundColor('rgba(0, 0, 0, 0.04)')
.padding({top:6,bottom:6})

}
}.scrollBar(BarState.Off)
.scrollable(ScrollDirection.Horizontal)

}
.borderRadius({bottomLeft:20,bottomRight:20})
.padding({left:20,right:20,top:12,bottom:20})
.width('100%').backgroundColor(Color.White)
}
@Builder GroupType(){
Row(){
Text('分组').fontWeight(500).fontSize(12).textOverflow({
overflow:TextOverflow.Ellipsis
}).ellipsisMode(EllipsisMode.END)
.maxLines(1).fontColor($r('app.color.theme_color'))
.textAlign(TextAlign.Center)
}
.margin({ right: 16, bottom: 16 })
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.width(68)
.backgroundColor('rgba(0, 0, 0, 0.04)').padding({left:16,right:16,top:6,bottom:6})
}
@Builder GroupType1(title:string){
Row(){
Text(title).fontWeight(500).fontSize(12).textOverflow({
overflow:TextOverflow.Ellipsis
}).ellipsisMode(EllipsisMode.END)
.maxLines(1).fontColor(Color.Black)
.textAlign(TextAlign.Center)
}

.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.width(68)
.backgroundColor('rgba(0, 0, 0, 0.04)').padding({left:16,right:16,top:6,bottom:6})
}
}
29 changes: 13 additions & 16 deletions entry/src/main/ets/pages/Index.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ struct Main {
new NavItem(3, $r('app.media.MINE_theme'),$r('app.media.MINE_line'), '我的')
]

@State scrollType:MainScrollBar[] = [
new MainScrollBar(false,new Scroller()),
new MainScrollBar(false,new Scroller()),
new MainScrollBar(false,new Scroller()),
new MainScrollBar(false,new Scroller()),
new MainScrollBar(false,new Scroller())
]
// @State scrollType:MainScrollBar[] = [
// new MainScrollBar(false,new Scroller()),
// new MainScrollBar(false,new Scroller()),
// new MainScrollBar(false,new Scroller()),
// new MainScrollBar(false,new Scroller()),
// new MainScrollBar(false,new Scroller())
// ]

build() {
Column() {
Expand All @@ -59,16 +59,13 @@ struct Main {
ForEach(this.nav,(item:NavItem) => {
TabContent() {
Column() {
Scroll(this.scrollType[item.index].isScroll) {
if (item.index === 0){
BookShelf()
} else if (item.index === 1){
Find()
} else if (item.index === 2){
Subscription()
}
if (item.index === 0){
BookShelf()
} else if (item.index === 1){
Find()
} else if (item.index === 2){
Subscription()
}
.scrollBar(BarState.Off)
if (item.index === 3){
MyCenter()
}
Expand Down
91 changes: 48 additions & 43 deletions entry/src/main/ets/pages/view/bookShelf/IndexShelf.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,56 +173,61 @@ export default struct IndexShelf {
}
}
.padding(15)

if (this.searchValue !== '浏览历史'){
groupTypeComponent({
bookType:this.bookType,
currentIndex:this.currentIndex,
groupCoverShow:this.groupCoverShow
})
}
Refresh({ refreshing: $$this.isRefreshing,builder:this.refreshComponent}) {
Scroll(){
Stack({alignContent:Alignment.Center}) {
if (this.GROUP === '标签'){
if (this.currentIndex === 0){
novelPage({
searchValue:this.searchValue,
currentIndex:0,
isClear:this.isClear,
Stack(){
if (this.searchValue !== '浏览历史'){
groupTypeComponent({
bookType:this.bookType,
currentIndex:this.currentIndex,
groupCoverShow:this.groupCoverShow
}).zIndex(999)
}
Refresh({ refreshing: $$this.isRefreshing,builder:this.refreshComponent}) {
Scroll(){
Stack({alignContent:Alignment.Center}) {
if (this.GROUP === '标签'){
if (this.currentIndex === 0){
novelPage({
searchValue:this.searchValue,
currentIndex:0,
isClear:this.isClear,
EXHIBIT:this.EXHIBIT
})
.zIndex(0)
} else if(this.currentIndex === 1) {
cartoonPage({searchValue:this.searchValue,currentIndex:1,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(1)
} else if(this.currentIndex === 2) {
soundPage({searchValue:this.searchValue,currentIndex:2,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(2)
}
} else {
BookFolder({
EXHIBIT:this.EXHIBIT
})
.zIndex(0)
} else if(this.currentIndex === 1) {
cartoonPage({searchValue:this.searchValue,currentIndex:1,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(1)
} else if(this.currentIndex === 2) {
soundPage({searchValue:this.searchValue,currentIndex:2,isClear:this.isClear,EXHIBIT:this.EXHIBIT}).zIndex(2)
}
} else {
BookFolder({
EXHIBIT:this.EXHIBIT
})
}
.padding({left:10,right:10})
}
.padding({left:10,right:10})
.align(Alignment.TopStart)
.height('83%')
// .height(this.searchValue==='浏览历史'?'83%':'78%')
.scrollBar(BarState.Off)
}
.align(Alignment.TopStart)
.height(this.searchValue==='浏览历史'?'83%':'78%')
.scrollBar(BarState.Off)
}.onStateChange((refreshStatus: RefreshStatus) =>{
if (refreshStatus === 1 || refreshStatus === 2) {
this.RefreshingTitle = '松开刷新'
} else{
this.RefreshingTitle = '刷新中...'
}
})
.onRefreshing(()=>{
setTimeout(() => {
this.counter++
this.isRefreshing = false
}, 1000)
.margin({top:this.searchValue==='浏览历史'?0:30})
.onStateChange((refreshStatus: RefreshStatus) =>{
if (refreshStatus === 1 || refreshStatus === 2) {
this.RefreshingTitle = '松开刷新'
} else{
this.RefreshingTitle = '刷新中...'
}
})
.onRefreshing(()=>{
setTimeout(() => {
this.counter++
this.isRefreshing = false
}, 1000)

})
}.alignContent(Alignment.Top)

})
}
}

Expand Down
4 changes: 2 additions & 2 deletions entry/src/main/ets/pages/view/myCenter/MyCenter.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ export default struct MyCenter {
new dataItem("清理缓存",3,$r("app.media.my_center_clean_icon")),
new dataItem("文件管理",4,$r("app.media.my_center_file_icon")),
]

@StorageLink('topRectHeight') topRectHeight: number = 0
build() {
Column(){

Blank(this.topRectHeight-20)
//右上角模式图标
Row({space:10}){
//设置图标
Expand Down

0 comments on commit ad87b78

Please sign in to comment.