renil/lx-music-mobile-mod
1
0
Fork 0
mirror of https://github.com/ikun0014/lx-music-mobile.git synced 2025-07-03 14:32:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化歌单列表歌单封面大小计算方式

Browse Source
This commit is contained in:
lyswhut 2023-06-04 15:13:43 +08:00
parent 9169b65a57
commit ec6dce2991
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
publish/changeLog.md
View File

@ -1,3 +1,7 @@
### 优化
- 优化歌单列表歌单封面大小计算方式
### 修复 ### 修复
- 修复wy歌单分类切换无效的问题 - 修复wy歌单分类切换无效的问题

36
src/screens/Home/Views/SongList/components/Songlist/List.tsx
View File

@ -58,7 +58,7 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
<ListItem <ListItem
item={item} item={item}
index={index} index={index}
width={itemWidth} width={rowInfo.width}
showSource={showSource} showSource={showSource}
onPress={onOpenDetail} onPress={onOpenDetail}
/> />
@ -103,20 +103,30 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
// let itemWidth = Math.max(Math.trunc(width * 0.125), MAX_WIDTH) // let itemWidth = Math.max(Math.trunc(width * 0.125), MAX_WIDTH)
// // if (itemWidth < ) // // if (itemWidth < )
// }, [width]) // }, [width])
const itemWidth = useMemo(() => { // const computedItemWidth = useMemo(() => {
let w = width * 0.9 - GAP // let w = width - GAP
let n = width / (MIN_WIDTH + GAP) // let n = width / (MIN_WIDTH + GAP)
if (n > 10) n = 10 // if (n > 10) n = 10
return Math.floor(w / n) // return Math.floor(w / n)
}, [width]) // }, [width])
// console.log(Math.trunc(width * 0.125), itemWidth) // console.log(Math.trunc(width * 0.125), itemWidth)
// console.log(itemWidth, MIN_WIDTH, GAP, width) // console.log(itemWidth, MIN_WIDTH, GAP, width)
const rowNum = useMemo(() => Math.max(Math.floor(width / itemWidth), 2), [itemWidth, width]) const rowInfo = useMemo(() => {
let w = width - GAP
let n = width / (MIN_WIDTH + GAP)
if (n > 10) n = 10
let computedItemWidth = Math.floor(w / n)
const num = Math.max(Math.floor(width / computedItemWidth), 2)
return {
num,
width: (width - GAP) / num,
}
}, [width])
// console.log(rowNum) // console.log(rowNum)
const list = useMemo(() => { const list = useMemo(() => {
const list = [...currentList] const list = [...currentList]
let whiteItemNum = (list.length % rowNum) let whiteItemNum = (list.length % rowInfo.num)
if (whiteItemNum > 0) whiteItemNum = rowNum - whiteItemNum if (whiteItemNum > 0) whiteItemNum = rowInfo.num - whiteItemNum
for (let i = 0; i < whiteItemNum; i++) { for (let i = 0; i < whiteItemNum; i++) {
list.push({ list.push({
id: `white__${i}`, id: `white__${i}`,
@ -130,7 +140,7 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
}) })
} }
return list return list
}, [currentList, rowNum]) }, [currentList, rowInfo])
// console.log(listInfo.list.map((item) => item.id)) // console.log(listInfo.list.map((item) => item.id))
return ( return (
@ -140,11 +150,11 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
? null ? null
: ( : (
<FlatList <FlatList
key={String(rowNum)} key={String(rowInfo.num)}
ref={flatListRef} ref={flatListRef}
style={styles.list} style={styles.list}
columnWrapperStyle={{ justifyContent: 'space-evenly' }} columnWrapperStyle={{ justifyContent: 'space-evenly' }}
numColumns={rowNum} numColumns={rowInfo.num}
data={list} data={list}
maxToRenderPerBatch={4} maxToRenderPerBatch={4}
// updateCellsBatchingPeriod={80} // updateCellsBatchingPeriod={80}