---
order: 3
title: 布局
type: 開發
---
頁面整體布局是一個產品最外層的框架結構，往往會包含導航、頁腳、側邊欄、通知欄以及內容等。在頁面之中，也有很多區塊的布局結構。在真實項目中，頁面布局通常統領整個應用的界面，有非常重要的作用。
## Ant Design Pro 的布局
在 Ant Design Pro 中，我們抽離了使用過程中的通用布局，都放在 `layouts` 目錄中，分別為：
- BasicLayout：基礎頁面布局，包含了頭部導航，側邊欄和通知欄：
<img src="https://gw.alipayobjects.com/zos/rmsportal/oXmyfmffJVvdbmDoGvuF.png" />
- UserLayout：抽離出用于登錄注冊頁面的通用布局
- BlankLayout：空白的布局
<img src="https://gw.alipayobjects.com/zos/rmsportal/mXsydBXvLqBVEZLMssEy.png" />
### 如何使用 Ant Design Pro 布局
通常布局是和路由系統緊密結合的，Ant Design Pro 的路由使用了 Umi 的路由方案，我們將配置信息統一抽離到 `config/config.ts` 下，通過如下配置定義每個頁面的布局：
```js
routers: [
{
path: '/',
component: '../layouts/BasicLayout', // 指定以下頁面的布局
routes: [
// dashboard
{ path: '/', redirect: '/dashboard/analysis' },
{
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
routes: [
{ path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
{ path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
{ path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
],
},
],
},
];
```
映射路由和頁面布局（組件）的關系如代碼所示，完整映射轉換實現可以參看 [config.ts](https://github.com/ant-design/ant-design-pro/blob/33f562974d1c72e077652223bd816a57933fe242/config/config.ts)。
更多 Umi 的路由配置方式可以參考：[Umi 配置式路由](https://umijs.org/guide/router.html#%E9%85%8D%E7%BD%AE%E5%BC%8F%E8%B7%AF%E7%94%B1)。
#### Pro 擴展配置
我們在 `config.ts` 擴展了一些關于 pro 全局菜單的配置。
```
{
name: 'dashboard',
icon: 'dashboard',
hideInMenu: true,
hideChildrenInMenu: true,
hideInBreadcrumb: true,
authority: ['admin'],
}
```
- `name`: 當前路由在菜單和面包屑中的名稱，注意這里是國際化配置的 key，具體展示菜單名可以在 [/src/locales/zh-CN.ts](https://github.com/ant-design/ant-design-pro/blob/v2/src/locales/zh-CN.ts) 進行配置。
- `icon`: 當前路由在菜單下的圖標名。
- `hideInMenu`: 當前路由在菜單中不展現，默認 `false`。
- `hideChildrenInMenu`: 當前路由的子級在菜單中不展現，默認 `false`。
- `hideInBreadcrumb`: 當前路由在面包屑中不展現，默認 `false`。
- `authority`: 允許展示的權限，不設則都可見，詳見：[權限管理](/docs/authority-management)。
## Ant Design 布局組件
除了 Pro 里的內建布局以外，在一些頁面中需要進行布局，可以使用 Ant Design 目前提供的兩套布局組件工具：[Layout](http://ant.design/components/layout/) 和 [Grid](http://ant.design/components/grid/)。
### Grid 組件
柵格布局是網頁中最常用的布局，其特點就是按照一定比例劃分頁面，能夠隨著屏幕的變化依舊保持比例，從而具有彈性布局的特點。
而 Ant Design 的柵格組件提供的功能更為強大，能夠設置間距、具有支持響應式的比例設置，以及支持 `flex` 模式，基本上涵蓋了大部分的布局場景，詳情參看：[Grid](http://ant.design/components/grid/)。
### Layout 組件
如果你需要輔助頁面框架級別的布局設計，那么 [Layout](http://ant.design/components/layout/) 則是你最佳的選擇，它抽象了大部分框架布局結構，使得只需要填空就可以開發規范專業的頁面整體布局，詳情參看：[Layout](http://ant.design/components/layout/)。
### 根據不同場景區分抽離布局組件
在大部分場景下，我們需要基于上面兩個組件封裝一些適用于當下具體業務的組件，包含了通用的導航、側邊欄、頂部通知、頁面標題等元素。例如 Ant Design Pro 的 [BasicLayout](https://github.com/ant-design/ant-design-pro/blob/33f562974d1c72e077652223bd816a57933fe242/src/layouts/BasicLayout.tsx)。
通常，我們會把抽象出來的布局組件，放到跟 `pages`、 `components` 平行的 `layouts` 文件夾中方便管理。需要注意的是，這些布局組件和我們平時使用的其它組件并沒有什么不同，只不過功能性上是為了處理布局問題。
> 除了 Ant Design 官方提供的布局組件，也可以試試 [社區精選](https://ant.design/docs/react/recommendation-cn) 里推薦的布局組件。
