Ionic React：如何点击切换网格列宽占比

一、使用Ionic Grid实现动态切换 #

Ionic的ion-col基于Flexbox布局，你可以通过React状态动态控制列的弹性占比，实现点击切换宽度的效果：

代码示例 #

import { useState } from 'react';
import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';

const SwapColumnLayout = () => {
  // 用状态标记是否已切换宽度
  const [isSwapped, setIsSwapped] = useState(false);

  return (
    <IonContent>
      <IonGrid style={{ height: '100vh' }}>
        <IonRow style={{ height: '100%' }}>
          <IonCol 
            style={{ 
              // 根据状态切换flex占比，flex: 1 1 [百分比] 控制弹性宽度
              flex: isSwapped ? '1 1 25%' : '1 1 75%',
              backgroundColor: '#f5f5f5',
              padding: '1rem'
            }}
          >
            首列（初始75%）
          </IonCol>
          <IonCol 
            // 点击切换状态
            onClick={() => setIsSwapped(prev => !prev)}
            style={{ 
              flex: isSwapped ? '1 1 75%' : '1 1 25%',
              backgroundColor: '#e8e8e8',
              padding: '1rem',
              cursor: 'pointer'
            }}
          >
            次列（初始25%，点击切换）
          </IonCol>
        </IonRow>
      </IonGrid>
    </IonContent>
  );
};

export default SwapColumnLayout;

原理说明 #

Ionic的ion-col本质是Flex容器的子项，flex: 1 1 [百分比]中的第三个值是基准宽度，配合前两个弹性增长/收缩参数，就能实现按比例分配宽度。通过React状态isSwapped切换基准宽度，即可实现列占比互换。

二、不使用Ionic Grid的替代实现方式 #

如果不需要依赖Ionic Grid组件，以下两种原生CSS布局方案更轻量化：

1. 原生Flexbox布局 #

直接用div构建Flex容器，逻辑和Ionic Grid一致，但更灵活：

import { useState } from 'react';
import { IonContent } from '@ionic/react';

const FlexSwapLayout = () => {
  const [isSwapped, setIsSwapped] = useState(false);

  return (
    <IonContent>
      <div style={{ 
        display: 'flex', 
        height: '100vh',
        width: '100%'
      }}>
        <div 
          style={{
            flex: isSwapped ? '1 1 25%' : '1 1 75%',
            backgroundColor: '#f5f5f5',
            padding: '1rem'
          }}
        >
          首列
        </div>
        <div 
          onClick={() => setIsSwapped(!isSwapped)}
          style={{
            flex: isSwapped ? '1 1 75%' : '1 1 25%',
            backgroundColor: '#e8e8e8',
            padding: '1rem',
            cursor: 'pointer'
          }}
        >
          次列（点击切换）
        </div>
      </div>
    </IonContent>
  );
};

export default FlexSwapLayout;

2. 原生CSS Grid布局 #

通过动态修改grid-template-columns属性实现列宽切换：

import { useState } from 'react';
import { IonContent } from '@ionic/react';

const GridSwapLayout = () => {
  const [isSwapped, setIsSwapped] = useState(false);

  return (
    <IonContent>
      <div style={{ 
        display: 'grid',
        // 根据状态切换列宽比例
        gridTemplateColumns: isSwapped ? '25% 75%' : '75% 25%',
        height: '100vh',
        width: '100%'
      }}>
        <div style={{ backgroundColor: '#f5f5f5', padding: '1rem' }}>
          首列
        </div>
        <div 
          onClick={() => setIsSwapped(!isSwapped)}
          style={{ backgroundColor: '#e8e8e8', padding: '1rem', cursor: 'pointer' }}
        >
          次列（点击切换）
        </div>
      </div>
    </IonContent>
  );
};

export default GridSwapLayout;

内容的提问来源于stack exchange，提问作者Mtavilla villa