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,13 +113,31 @@ const CascaderComponent: React.FC<CascaderProps> = ({
 
     // 渲染所有级联列
     const renderColumns = () => {
-        return allLevelsData.map((items, level) => (
+        const totalLevels = allLevelsData.length;
+        return allLevelsData.map((items, level) => {
+            // 计算每列的宽度
+            let width;
+            if (totalLevels === 1) {
+                width = '100%'; // 只有一级时占满全部宽度
+            } else if (totalLevels === 2) {
+                width = level === 0 ? '40%' : '60%'; // 两级时第一级40%，第二级60%
+            } else {
+                // 三级或以上时，前两级各占30%，其余级别平分剩余40%
+                if (level < 2) {
+                    width = '30%';
+                } else {
+                    const remainingLevels = totalLevels - 2;
+                    width = remainingLevels > 0 ? `${40 / remainingLevels}%` : '40%';
+                }
+            }
+
+            return (
                 <View
                     key={`column-${level}`}
                     style={[
                         styles.column,
-                    { width: columnWidth },
+                        { width },
-                    showDivider && level < allLevelsData.length - 1 && [
+                        showDivider && level < totalLevels - 1 && [
                             styles.columnWithDivider,
                             { borderRightColor: dividerColor }
                         ]
@@ -133,7 +151,8 @@ const CascaderComponent: React.FC<CascaderProps> = ({
                         {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,