如何使用Ant Design与ReactJS构建横向图片列表容器？

核心布局拆解（对应需求界面） #

每个标签页可拆分为 顶部操作栏 + 主内容区（左侧筛选/配置栏 + 右侧数据展示区），以下是基于Ant Design的具体实现方案：

1. 基础标签页框架 #

使用Ant Design的Tabs组件搭建容器，通过TabPane定义各标签项：

import { Tabs } from 'antd';
const { TabPane } = Tabs;

const CustomTabLayout = () => {
  return (
    <Tabs defaultActiveKey="1" type="card">
      <TabPane tab="标签页1" key="1">
        {/* 标签页1内容布局 */}
      </TabPane>
      <TabPane tab="标签页2" key="2">
        {/* 标签页2内容布局 */}
      </TabPane>
    </Tabs>
  );
};
export default CustomTabLayout;

2. 单个标签页内部布局实现 #

推荐使用Ant Design栅格系统（Row/Col）实现响应式左右分栏，也可按需使用Flex布局：

方案一：栅格系统（适配响应式场景）

import { Tabs, Row, Col, Card, Form, Button, Table } from 'antd';
const { TabPane } = Tabs;

const CustomTabLayout = () => {
  return (
    <Tabs defaultActiveKey="1" type="card">
      <TabPane tab="标签页1" key="1">
        {/* 顶部操作栏 */}
        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end' }}>
          <Button type="primary">新增数据</Button>
        </div>

        {/* 主内容分栏 */}
        <Row gutter={16}>
          {/* 左侧筛选区，占6栅格（总24栅格） */}
          <Col xs={24} sm={8} md={6}>
            <Card title="筛选条件" size="small">
              <Form layout="vertical">
                <Form.Item label="名称">
                  <Input placeholder="请输入关键词" />
                </Form.Item>
                <Form.Item label="状态">
                  <Select placeholder="请选择状态" />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" block>查询</Button>
                </Form.Item>
              </Form>
            </Card>
          </Col>

          {/* 右侧数据展示区，占18栅格 */}
          <Col xs={24} sm={16} md={18}>
            <Card title="数据列表">
              {/* 示例表格，替换为实际数据组件 */}
              <Table columns={[]} dataSource={[]} pagination={{ pageSize: 10 }} />
            </Card>
          </Col>
        </Row>
      </TabPane>
    </Tabs>
  );
};
export default CustomTabLayout;

方案二：Flex布局（自定义性更强）

无需严格响应式时，可直接用Flex实现分栏：

<TabPane tab="标签页1" key="1">
  {/* 顶部操作栏 */}
  <div style={{ marginBottom: 16, textAlign: 'right' }}>
    <Button type="primary">操作按钮</Button>
  </div>

  {/* 主内容Flex分栏 */}
  <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
    <div style={{ flex: 1, minWidth: 280 }}>
      <Card title="筛选配置" size="small">
        {/* 筛选表单内容 */}
      </Card>
    </div>
    <div style={{ flex: 3 }}>
      <Card title="数据展示">
        {/* 数据内容组件 */}
      </Card>
    </div>
  </div>
</TabPane>

3. 细节优化建议 #

• 响应式适配：通过栅格的xs/sm/md断点，让移动端自动将左右布局堆叠为上下结构
• 性能优化：开启Tabs的lazyLoad属性，延迟加载未激活标签页的内容
• 空间节省：筛选项较多时，用Collapse组件给筛选区添加折叠功能
• 样式统一：统一设置表单、卡片的size属性，保持界面风格一致

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