调整设置界面竖屏下的UI布局

publish/changeLog.md

@@ -6,6 +6,7 @@
 
 - 更新设置界面菜单布局
 - 添加歌单分类、排行榜激活指示器
+- 调整设置界面竖屏下的UI布局
 
 ### 修复
 

src/event/appEvent.ts

@@ -1,6 +1,6 @@
 import { setNavActiveId } from '@/core/common'
 import Event from './Event'
-import commonState, { type InitState as CommonState } from '@/store/common/state'
+import commonState from '@/store/common/state'
 import { type Source as SonglistSource } from '@/store/songlist/state'
 import { type SearchType } from '@/store/search/state'
 
@@ -162,10 +162,6 @@ export class AppEvent extends Event {
     this.emit('changeMenuVisible', visible)
   }
 
-  homeNavPagerChanged(id: CommonState['navActiveId']) {
-    this.emit('homeNavPagerChanged', id)
-  }
-
   /**
    * 搜索类型改变事件
    * @param type

src/lang/en_us.json

@@ -204,6 +204,7 @@
   "setting_basic_theme": "Theme",
   "setting_basic_theme_auto_theme": "Follow the system light and dark mode to switch themes",
   "setting_basic_theme_hide_bg_dark": "Hide black theme",
+  "setting_basic_theme_more_btn_show": "Expand themes",
   "setting_list": "List settings",
   "setting_list_add_music_location_type": "Position when the song was added to the list",
   "setting_list_add_music_location_type_bottom": "Bottom",

src/lang/zh_cn.json

@@ -204,6 +204,7 @@
   "setting_basic_theme": "主题颜色",
   "setting_basic_theme_auto_theme": "跟随系统亮、暗模式切换主题",
   "setting_basic_theme_hide_bg_dark": "隐藏黑色主题背景",
+  "setting_basic_theme_more_btn_show": "更多主题",
   "setting_list": "列表设置",
   "setting_list_add_music_location_type": "添加歌曲到列表时的位置",
   "setting_list_add_music_location_type_bottom": "底部",

src/screens/Home/Vertical/Main.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { View } from 'react-native'
+import { InteractionManager, View } from 'react-native'
 import Search from '../Views/Search'
 import SongList from '../Views/SongList'
 import Mylist from '../Views/Mylist'
@@ -16,7 +16,13 @@ const SearchPage = () => {
   const component = useMemo(() => <Search />, [])
   useEffect(() => {
     const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
-      if (id == 'nav_search') setVisible(true)
+      if (id == 'nav_search') {
+        requestAnimationFrame(() => {
+          void InteractionManager.runAfterInteractions(() => {
+            setVisible(true)
+          })
+        })
+      }
     }
     const handleHide = () => {
       setVisible(false)
@@ -39,7 +45,13 @@ const SongListPage = () => {
   const component = useMemo(() => <SongList />, [])
   useEffect(() => {
     const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
-      if (id == 'nav_songlist') setVisible(true)
+      if (id == 'nav_songlist') {
+        requestAnimationFrame(() => {
+          void InteractionManager.runAfterInteractions(() => {
+            setVisible(true)
+          })
+        })
+      }
     }
     const handleHide = () => {
       setVisible(false)
@@ -63,7 +75,13 @@ const LeaderboardPage = () => {
   const component = useMemo(() => <Leaderboard />, [])
   useEffect(() => {
     const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
-      if (id == 'nav_top') setVisible(true)
+      if (id == 'nav_top') {
+        requestAnimationFrame(() => {
+          void InteractionManager.runAfterInteractions(() => {
+            setVisible(true)
+          })
+        })
+      }
     }
     const handleHide = () => {
       setVisible(false)
@@ -86,7 +104,13 @@ const MylistPage = () => {
   const component = useMemo(() => <Mylist />, [])
   useEffect(() => {
     const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
-      if (id == 'nav_love') setVisible(true)
+      if (id == 'nav_love') {
+        requestAnimationFrame(() => {
+          void InteractionManager.runAfterInteractions(() => {
+            setVisible(true)
+          })
+        })
+      }
     }
     const handleHide = () => {
       setVisible(false)
@@ -109,7 +133,13 @@ const SettingPage = () => {
   const component = useMemo(() => <Setting />, [])
   useEffect(() => {
     const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
-      if (id == 'nav_setting') setVisible(true)
+      if (id == 'nav_setting') {
+        requestAnimationFrame(() => {
+          void InteractionManager.runAfterInteractions(() => {
+            setVisible(true)
+          })
+        })
+      }
     }
     global.state_event.on('navActiveIdUpdated', handleNavIdUpdate)
 
@@ -162,7 +192,6 @@ const Main = () => {
     if (activeIndexRef.current != viewMap[commonState.navActiveId]) {
       setNavActiveId(indexMap[activeIndexRef.current])
     }
-    global.app_event.homeNavPagerChanged(indexMap[activeIndexRef.current])
   }, [])
 
   const onPageScrollStateChanged = useCallback(({ nativeEvent }: PageScrollStateChangedNativeEvent) => {

src/screens/Home/Views/Setting/Main.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react
 import { InteractionManager } from 'react-native'
 
 import Basic from './settings/Basic'
-import Theme from './settings/Theme'
 import Player from './settings/Player'
 import LyricDesktop from './settings/LyricDesktop'
 import Search from './settings/Search'
@@ -15,7 +14,6 @@ import About from './settings/About'
 
 export const SETTING_SCREENS = [
   'basic',
-  'theme',
   'player',
   'lyric_desktop',
   'search',
@@ -51,7 +49,6 @@ const Main = forwardRef<MainType, {}>((props, ref) => {
 
   const component = useMemo(() => {
     switch (id) {
-      case 'theme': return <Theme />
       case 'player': return <Player />
       case 'lyric_desktop': return <LyricDesktop />
       case 'search': return <Search />

src/screens/Home/Views/Setting/Vertical/Main.tsx

@@ -0,0 +1,66 @@
+import React, { memo } from 'react'
+import { FlatList, type FlatListProps } from 'react-native'
+
+import Basic from '../settings/Basic'
+import Player from '../settings/Player'
+import LyricDesktop from '../settings/LyricDesktop'
+import Search from '../settings/Search'
+import List from '../settings/List'
+import Sync from '../settings/Sync'
+import Backup from '../settings/Backup'
+import Other from '../settings/Other'
+import Version from '../settings/Version'
+import About from '../settings/About'
+import { createStyle } from '@/utils/tools'
+import { SETTING_SCREENS, type SettingScreenIds } from '../Main'
+
+type FlatListType = FlatListProps<SettingScreenIds>
+
+
+const styles = createStyle({
+  content: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 15,
+    paddingBottom: 15,
+    flex: 0,
+  },
+})
+
+const ListItem = memo(({
+  id,
+}: { id: SettingScreenIds }) => {
+  switch (id) {
+    case 'player': return <Player />
+    case 'lyric_desktop': return <LyricDesktop />
+    case 'search': return <Search />
+    case 'list': return <List />
+    case 'sync': return <Sync />
+    case 'backup': return <Backup />
+    case 'other': return <Other />
+    case 'version': return <Version />
+    case 'about': return <About />
+    case 'basic':
+    default: return <Basic />
+  }
+}, () => true)
+
+export default () => {
+  const renderItem: FlatListType['renderItem'] = ({ item }) => <ListItem id={item} />
+  const getkey: FlatListType['keyExtractor'] = item => item
+
+  return (
+    <FlatList
+      data={SETTING_SCREENS}
+      keyboardShouldPersistTaps={'always'}
+      renderItem={renderItem}
+      keyExtractor={getkey}
+      contentContainerStyle={styles.content}
+      maxToRenderPerBatch={2}
+      // updateCellsBatchingPeriod={80}
+      windowSize={2}
+      // removeClippedSubviews={true}
+      initialNumToRender={1}
+    />
+  )
+}

src/screens/Home/Views/Setting/Vertical/index.tsx

@@ -1,44 +1,29 @@
-import React, { useCallback, useRef } from 'react'
-import { ScrollView, View, type DrawerLayoutAndroid } from 'react-native'
-// import { getWindowSise, onDimensionChange } from '@/utils/tools'
-import NavList from './NavList'
-import Main, { type SettingScreenIds, type MainType } from '../Main'
-import { createStyle } from '@/utils/tools'
+export { default } from './Main'
+// import React from 'react'
+// import { View } from 'react-native'
+// import Main from './Main'
+// import { createStyle } from '@/utils/tools'
 
 
-const Content = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null)
-  const mainRef = useRef<MainType>(null)
+// const Content = () => {
+//   return (
+//     <View style={styles.container}>
+//       <Main />
+//     </View>
+//   )
+// }
 
+// const styles = createStyle({
+//   container: {
+//     flex: 1,
+//     flexDirection: 'column',
+//   },
+//   // main: {
+//   //   paddingLeft: 15,
+//   //   paddingRight: 15,
+//   //   paddingTop: 15,
+//   //   paddingBottom: 15,
+//   // },
+// })
 
-  const handleChangeId = useCallback((id: SettingScreenIds) => {
-    drawer.current?.closeDrawer()
-    mainRef.current?.setActiveId(id)
-  }, [])
-
-  // console.log('render drawer content')
-
-  return (
-    <View style={styles.container}>
-      <NavList onChangeId={handleChangeId} />
-      <ScrollView contentContainerStyle={styles.main} keyboardShouldPersistTaps={'always'}>
-        <Main ref={mainRef} />
-      </ScrollView>
-    </View>
-  )
-}
-
-const styles = createStyle({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  main: {
-    paddingLeft: 15,
-    paddingRight: 15,
-    paddingTop: 15,
-    paddingBottom: 15,
-  },
-})
-
-export default Content
+// export default Content

src/screens/Home/Views/Setting/settings/Basic/index.tsx

@@ -1,5 +1,6 @@
 import React, { memo } from 'react'
 
+import Theme from '../Theme'
 import Section from '../../components/Section'
 import Source from './Source'
 import SourceName from './SourceName'
@@ -23,12 +24,13 @@ export default memo(() => {
       <IsShowBackBtn />
       <IsShowExitBtn />
       <IsAutoHidePlayBar />
-      <Source />
-      <SourceName />
+      <Theme />
       <DrawerLayoutPosition />
       <Language />
       <FontSize />
       <ShareType />
+      <Source />
+      <SourceName />
     </Section>
   )
 })

src/screens/Home/Views/Setting/settings/Theme/IsHideBgDark.tsx

@@ -32,6 +32,6 @@ export default memo(() => {
 const styles = createStyle({
   content: {
     marginTop: 5,
-    // marginBottom: 5,
+    marginBottom: 15,
   },
 })

src/screens/Home/Views/Setting/settings/Theme/Theme.tsx

@@ -10,6 +10,7 @@ import { BG_IMAGES, getAllThemes, type LocalTheme } from '@/theme/themes'
 import Text from '@/components/common/Text'
 import { createStyle } from '@/utils/tools'
 import { scaleSizeH } from '@/utils/pixelRatio'
+import { Icon } from '@/components/common/Icon'
 
 const useActive = (id: string) => {
   const activeThemeId = useSettingValue('theme.id')
@@ -17,10 +18,11 @@ const useActive = (id: string) => {
   return isActive
 }
 
-const ThemeItem = ({ id, name, color, image, setTheme }: {
+const ThemeItem = ({ id, name, color, image, setTheme, showAll }: {
   id: string
   name: string
   color: string
+  showAll: boolean
   image?: ImageSourcePropType
   setTheme: (id: string) => void
 }) => {
@@ -28,17 +30,38 @@ const ThemeItem = ({ id, name, color, image, setTheme }: {
   const isActive = useActive(id)
 
   return (
-    <TouchableOpacity style={{ ...styles.item, width: scaleSizeH(ITEM_HEIGHT) }} activeOpacity={0.5} onPress={() => { setTheme(id) }}>
-      <View style={{ ...styles.colorContent, width: scaleSizeH(COLOR_ITEM_HEIGHT), borderColor: isActive ? color : 'transparent' }}>
-        {
-          image
-            ? <ImageBackground style={{ ...styles.imageContent, width: scaleSizeH(IMAGE_HEIGHT), backgroundColor: color }}
-                source={image} borderRadius={4} />
-            : <View style={{ ...styles.imageContent, width: scaleSizeH(IMAGE_HEIGHT), backgroundColor: color }}></View>
-          }
-      </View>
-      <Text style={styles.name} size={12} color={isActive ? color : theme['c-font']} numberOfLines={1}>{name}</Text>
-    </TouchableOpacity>
+    showAll || isActive ? (
+      <TouchableOpacity style={{ ...styles.item, width: scaleSizeH(ITEM_HEIGHT) }} activeOpacity={0.5} onPress={() => { setTheme(id) }}>
+        <View style={{ ...styles.colorContent, width: scaleSizeH(COLOR_ITEM_HEIGHT), borderColor: isActive ? color : 'transparent' }}>
+          {
+            image
+              ? <ImageBackground style={{ ...styles.imageContent, width: scaleSizeH(IMAGE_HEIGHT), backgroundColor: color }}
+                  source={image} borderRadius={4} />
+              : <View style={{ ...styles.imageContent, width: scaleSizeH(IMAGE_HEIGHT), backgroundColor: color }}></View>
+            }
+        </View>
+        <Text style={styles.name} size={12} color={isActive ? color : theme['c-font']} numberOfLines={1}>{name}</Text>
+      </TouchableOpacity>
+    ) : null
+  )
+}
+
+const MoreBtn = ({ showAll, setShowAll }: {
+  showAll: boolean
+  setShowAll: (showAll: boolean) => void
+}) => {
+  const theme = useTheme()
+  const t = useI18n()
+
+  return (
+    showAll ? null
+      : (
+          <TouchableOpacity style={styles.moreBtn} activeOpacity={0.5} onPress={() => { setShowAll(!showAll) }}>
+            <Text size={14} color={theme['c-primary-font']} numberOfLines={1}>{t('setting_basic_theme_more_btn_show')}</Text>
+            <Icon name="chevron-right" size={12} color={theme['c-primary-font']} />
+          </TouchableOpacity>
+        )
+
   )
 }
 
@@ -49,6 +72,7 @@ interface ThemeInfo {
 }
 const initInfo: ThemeInfo = { themes: [], userThemes: [], dataPath: '' }
 export default memo(() => {
+  const [showAll, setShowAll] = useState(false)
   const t = useI18n()
   const [themeInfo, setThemeInfo] = useState(initInfo)
   const setThemeId = useCallback((id: string) => {
@@ -67,42 +91,46 @@ export default memo(() => {
         {
           themeInfo.themes.map(({ id, config }) => {
             return <ThemeItem
-            key={id}
-            color={config.themeColors['c-theme']}
-            image={config.extInfo['bg-image'] ? BG_IMAGES[config.extInfo['bg-image']] : undefined}
-            id={id}
-            name={t(`theme_${id}`)}
-            setTheme={setThemeId} />
+              key={id}
+              color={config.themeColors['c-theme']}
+              image={config.extInfo['bg-image'] ? BG_IMAGES[config.extInfo['bg-image']] : undefined}
+              showAll={showAll}
+              id={id}
+              name={t(`theme_${id}`)}
+              setTheme={setThemeId} />
           })
         }
         {
           themeInfo.userThemes.map(({ id, name, config }) => {
             return <ThemeItem
-            key={id}
-            color={config.themeColors['c-theme']}
-            // image={undefined}
-            id={id}
-            name={name}
-            setTheme={setThemeId} />
+              key={id}
+              color={config.themeColors['c-theme']}
+              // image={undefined}
+              showAll={showAll}
+              id={id}
+              name={name}
+              setTheme={setThemeId} />
           })
         }
+        <MoreBtn showAll={showAll} setShowAll={setShowAll} />
       </View>
     </SubTitle>
   )
 })
 
-const ITEM_HEIGHT = 56
-const COLOR_ITEM_HEIGHT = 34
-const IMAGE_HEIGHT = 27
+const ITEM_HEIGHT = 62
+const COLOR_ITEM_HEIGHT = 36
+const IMAGE_HEIGHT = 29
 const styles = createStyle({
   list: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    gap: 10,
   },
   item: {
-    marginRight: 15,
+    // marginRight: 15,
     alignItems: 'center',
-    marginTop: 5,
+    // marginTop: 5,
     // backgroundColor: 'rgba(0,0,0,0.2)',
   },
   colorContent: {
@@ -111,6 +139,7 @@ const styles = createStyle({
     borderWidth: 1.6,
     alignItems: 'center',
     justifyContent: 'center',
+    // backgroundColor: 'rgba(0,0,0,0.2)',
   },
   imageContent: {
     height: IMAGE_HEIGHT,
@@ -120,4 +149,11 @@ const styles = createStyle({
   name: {
     marginTop: 2,
   },
+  moreBtn: {
+    marginLeft: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    // justifyContent: 'center',
+    gap: 8,
+  },
 })

src/screens/Home/Views/Setting/settings/Theme/index.tsx

@@ -1,19 +1,17 @@
 import React, { memo } from 'react'
 
-import Section from '../../components/Section'
+// import Section from '../../components/Section'
 import Theme from './Theme'
 import IsAutoTheme from './IsAutoTheme'
 import IsHideBgDark from './IsHideBgDark'
-import { useI18n } from '@/lang/i18n'
+// import { useI18n } from '@/lang/i18n'
 
 export default memo(() => {
-  const t = useI18n()
-
   return (
-    <Section title={t('setting_theme')}>
+    <>
       <Theme />
       <IsAutoTheme />
       <IsHideBgDark />
-    </Section>
+    </>
   )
 })

src/utils/tools.ts

@@ -395,6 +395,7 @@ export const trasformeStyle = <T extends Style>(styles: T): T => {
       case 'paddingLeft':
       case 'paddingRight':
       case 'paddingHorizontal':
+      case 'gap':
         newStyle[p] = scaleSizeW(v)
         break
       case 'padding':