【React+Typescript+Antd】界面框架布局是页面的骨架，骨架搭好了，之后就是细枝末节的填充。

新手上路，拿到项目的第一步就是画界面，但是对于复杂的页面如何能够做到页面架构清晰又不互相干扰呢？

Antd的Layout布局能够很好地解决这个问题。

它定义了Header（页头）、Content（内容）、Footer（页脚）、Sider（导航）等页面整体框架结构。你可以在这个框架结构基础上，再结合Antd的Grid栅格布局，几乎可以应付所有复杂的页面。

之前我不理解为什么官方把Grid栅格和Layout布局放在一块，现在才发现，他们只有配合使用才能发挥出更大的作用。

下面是我页面的布局：

像类似这样的页面，就需要用到Layout布局下的所有组件：Header、Content、Footer、Sider，在Content里面需要运用Grid里的Row+Col（24栅格）来调整大体上的左右布局。

到这里整体架构就形成了，最后将每个板块作为组件依次导入即可。

Content里的页面代码如下：

import React from "react";
import "./MainPage.css";
import { Layout, Row, Col } from "antd";
import MainHeader from "./MainHeader";
import PanelMain from "./PanelMain";
import PanelLint from "./PanelLint";
import PanelAutoTest from "./PanelAutoTest";
import PanelCommit from "./PanelCommit";
import PanelCodeReview from "./PanelCodeReview";
import PanelMember from "./PanelMember";
const { Header, Content, Footer, Sider } = Layout;


class MainPage extends React.Component<any> {

    render() {
        return (
            <Layout className="body">
                <Header className="header" style={{ background: '#fff', padding: 0, height: 152 }}>
                    <MainHeader />
                </Header>
                <Content style={{ background: 'none', padding: 0, margin: 24 }}>
                    <div className="content">
                        <Row >
                            <Col span="16">
                                <div className="main-left">
                                    <PanelMain jumpFunc={this.props.jumpFunc} />
                                </div>
                                <div className="main-left">
                                    <PanelLint />
                                </div>
                                <div className="main-left">
                                    <PanelAutoTest />
                                </div>
                            </Col>
                            <Col span="8" className="cloumn">
                                <div className="main-right">
                                    <PanelCommit />
                                </div>
                                <div className="main-right">
                                    <PanelCodeReview />
                                </div>
                                <div className="main-right">
                                    <PanelMember />
                                </div>
                            </Col>
                        </Row>
                    </div>
                </Content>
            </Layout>
        );
    }
}

export default MainPage;

注：Antd组件对于样式修改有一定局限性，新增class添加样式并不能起作用，一些常用属性（如：height、width、padding等）需要通过行内style样式才能生效。

以上就是页面布局的内容，欢迎留言交流。