From d1ed2dd8d698bb2eb9638ddd2958ba587b643697 Mon Sep 17 00:00:00 2001
From: zimplexing <zhangx0728@gmail.com>
Date: Wed, 13 Aug 2025 19:35:08 +0800
Subject: [PATCH] fix(layout): improve video card grid alignment

- Implement intelligent row-based layout system
- Full rows (3 cards) use space-between for even distribution
- Partial rows (<3 cards) use flex-start for left alignment
- Replace flexWrap approach with row grouping for better control
- Add dynamic margin handling for different row types

This resolves both the uneven spacing in full rows and scattered alignment in partial rows.
---
 components/CustomScrollView.tsx | 52 ++++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/components/CustomScrollView.tsx b/components/CustomScrollView.tsx
index 23b5492..6608d08 100644
--- a/components/CustomScrollView.tsx
+++ b/components/CustomScrollView.tsx
@@ -89,20 +89,39 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
     );
   }
 
+  // 将数据按行分组
+  const groupItemsByRow = (items: any[], columns: number) => {
+    const rows = [];
+    for (let i = 0; i < items.length; i += columns) {
+      rows.push(items.slice(i, i + columns));
+    }
+    return rows;
+  };
+
+  const rows = groupItemsByRow(data, effectiveColumns);
+
   // 动态样式
   const dynamicStyles = StyleSheet.create({
     listContent: {
       paddingBottom: responsiveConfig.spacing * 2,
       paddingHorizontal: responsiveConfig.spacing / 2,
     },
-    gridContainer: {
+    rowContainer: {
       flexDirection: "row",
-      flexWrap: "wrap",
-      justifyContent: "space-evenly",
+      marginBottom: responsiveConfig.spacing,
+    },
+    fullRowContainer: {
+      justifyContent: "space-between",
+    },
+    partialRowContainer: {
+      justifyContent: "flex-start",
     },
     itemContainer: {
       width: responsiveConfig.cardWidth,
-      marginBottom: responsiveConfig.spacing,
+    },
+    itemWithMargin: {
+      width: responsiveConfig.cardWidth,
+      marginRight: responsiveConfig.spacing,
     },
   });
 
@@ -115,13 +134,26 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
     >
       {data.length > 0 ? (
         <>
-          <View style={dynamicStyles.gridContainer}>
-            {data.map((item, index) => (
-              <View key={index} style={dynamicStyles.itemContainer}>
-                {renderItem({ item, index })}
+          {rows.map((row, rowIndex) => {
+            const isFullRow = row.length === effectiveColumns;
+            const rowStyle = isFullRow ? dynamicStyles.fullRowContainer : dynamicStyles.partialRowContainer;
+            
+            return (
+              <View key={rowIndex} style={[dynamicStyles.rowContainer, rowStyle]}>
+                {row.map((item, itemIndex) => {
+                  const actualIndex = rowIndex * effectiveColumns + itemIndex;
+                  const isLastItemInPartialRow = !isFullRow && itemIndex === row.length - 1;
+                  const itemStyle = isLastItemInPartialRow ? dynamicStyles.itemContainer : dynamicStyles.itemWithMargin;
+                  
+                  return (
+                    <View key={actualIndex} style={isFullRow ? dynamicStyles.itemContainer : itemStyle}>
+                      {renderItem({ item, index: actualIndex })}
+                    </View>
+                  );
+                })}
               </View>
-            ))}
-          </View>
+            );
+          })}
           {renderFooter()}
         </>
       ) : (