feat: 级联选择宽度问题

components/cascader.tsx

@@ -72,7 +72,7 @@ const CascaderComponent: React.FC<CascaderProps> = ({
     // 渲染某一级选项
     const renderLevel = (items: CascaderItem[], level: number) => {
         return (
-            <View style={[styles.levelContainer, { width: columnWidth }]}>
+            <View style={[styles.levelContainer]}>
                 {items.map((item, index) => {
                     const isActive = selectedItems[level]?.name === item.name;
                     return (
@@ -113,27 +113,46 @@ const CascaderComponent: React.FC<CascaderProps> = ({
 
     // 渲染所有级联列
     const renderColumns = () => {
-        return allLevelsData.map((items, level) => (
+        const totalLevels = allLevelsData.length;
-            <View
+        return allLevelsData.map((items, level) => {
-                key={`column-${level}`}
+            // 计算每列的宽度
-                style={[
+            let width;
-                    styles.column,
+            if (totalLevels === 1) {
-                    { width: columnWidth },
+                width = '100%'; // 只有一级时占满全部宽度
-                    showDivider && level < allLevelsData.length - 1 && [
+            } else if (totalLevels === 2) {
-                        styles.columnWithDivider,
+                width = level === 0 ? '40%' : '60%'; // 两级时第一级40%，第二级60%
-                        { borderRightColor: dividerColor }
+            } else {
-                    ]
+                // 三级或以上时，前两级各占30%，其余级别平分剩余40%
-                ]}
+                if (level < 2) {
-            >
+                    width = '30%';
-                <ScrollView
+                } else {
-                    style={{ flex: 1 }}
+                    const remainingLevels = totalLevels - 2;
-                    showsVerticalScrollIndicator={true}
+                    width = remainingLevels > 0 ? `${40 / remainingLevels}%` : '40%';
-                    contentContainerStyle={{ paddingBottom: 20 }}
+                }
+            }
+
+            return (
+                <View
+                    key={`column-${level}`}
+                    style={[
+                        styles.column,
+                        { width },
+                        showDivider && level < totalLevels - 1 && [
+                            styles.columnWithDivider,
+                            { borderRightColor: dividerColor }
+                        ]
+                    ]}
                 >
-                    {renderLevel(items, level)}
+                    <ScrollView
-                </ScrollView>
+                        style={{ flex: 1 }}
-            </View>
+                        showsVerticalScrollIndicator={true}
-        ));
+                        contentContainerStyle={{ paddingBottom: 20 }}
+                    >
+                        {renderLevel(items, level)}
+                    </ScrollView>
+                </View>
+            );
+        });
     };
 
     // 自定义显示内容
@@ -167,15 +186,17 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#fff',
-        height: 300, // Set a fixed height for the container
+        height: 300,
     },
     scrollContent: {
         flexGrow: 1,
         height: '100%',
+        flexDirection: 'row',
     },
     column: {
         height: '100%',
         maxHeight: '100%',
+        flexShrink: 0,
     },
     columnWithDivider: {
         borderRightWidth: 1,