本文示例代碼已上傳至我的
Github倉庫：https://github.com/CNFeffery/dash-master
大家好我是費老師，對於剛上手dash應用開發的新手朋友來說，如何進行合理且美觀的頁面整體佈局構建是一道“難題”。今天的文章中，我就將爲大家介紹有關dash應用頁面佈局的一些實用技巧，並附上幾個可以直接套用的dash應用經典頁面模板，話不多說，let's go🚀
閱讀本文大約需要10分鐘
示例1：簡單的頁首+內容佈局
下面的例子中展示了最基礎的頁面佈局方案，由頁首及其下方的內容區域構成：
其中頁首左側部分我們可以用來放置應用的logo圖片、應用名稱等信息，右側部分則可以放置一級導航菜單欄等內容，爲了快捷實現其中各元素的垂直居中，以及左右兩側分別對齊的樣式效果，我們使用到fac組件庫中的網格系統相關功能（文檔地址：https://fac.feffery.tech/AntdRow ），非常方便，關鍵之處在於使用align='middle'開啓垂直居中效果，以及使用justify='space-between'實現兩側內容的左右對齊效果：
完成頁首部分後，下方的內容區域則更簡單了，值得注意的是，其中爲了確保帶有背景色的內容區容器至少充滿頁首之外的剩餘高度，可以利用css中的calc()動態計算高度，即頁面視口整體高度100vh減去頁首部分佔據的64px高度：
本示例完整代碼見文章開頭附件地址中的app1.py。
示例2：粘性頁首+內容佈局
在前面的示例1中，若頁面內容區域較長，頁首部分會隨着用戶滾動頁面而被滾上去，如果我們希望應用中的頁首部分一直緊貼頁面頂端，就像下面的示例2所示：
最簡單的方式就是在前面示例1的基礎上，將頁首部分套在fac中的固釘組件AntdAffix中（文檔地址：https://fac.feffery.tech/AntdAffix ），並設置offsetTop=0即可，相當的簡單😉：
本示例完整代碼見文章開頭附件地址中的app2.py。
示例3：固定的側邊菜單欄+粘性頁首+內容佈局
在前面的兩個例子中，我們的頁面中充當導航作用的只有位於頁首右側的一級導航菜單欄，如果我們的應用功能進一步複雜起來，需要在當前一級菜單欄對應頁面下再設立二級導航菜單，經典的方式是像下面的例子那樣，在原本的內容區中分出一部分寬度放置側邊菜單欄：
且爲了更現代化的交互效果，新加入的側邊菜單欄是處於固定狀態的，與內容區域相互獨立：
要實現這樣的經典頁面佈局效果，我們只需要在前面示例2的基礎上，將下方內容區域改造成基於fac網格系統的新佈局即可：
其中涉及到固定側邊菜單欄的部分，重點在於爲菜單欄容器基於calc()動態計算高度值，即扣除頁首高度之後的剩餘部分，並通過overflowY屬性開啓豎向滾動條，而最關鍵的固定效果則同樣是基於AntdAffix實現的，只不過這裏的offsetTop需要考慮頁首部分高度，所以設置爲64：
本示例完整代碼見文章開頭附件地址中的app3.py。
相關參考資料：
- fac官網：https://fac.feffery.tech/
- fuc官網：https://fuc.feffery.tech/
以上就是本文的全部內容，更多有關dash應用開發的前沿知識和技巧歡迎持續關注玩轉dash公衆號。