分隔框(DividedBox)是一種布局類組件,可以分為兩種,其中一種叫水平分隔框(HDividedBox),另一種叫垂直分隔框(VDividedBox)。水平分隔框會將其子級分為兩列,而垂直分隔框則會將其子級分為兩行。列與列之間以及行與行之間一般都會有一條可以拖動的用以改變子級組件大小的分隔條。下面僅以垂直分隔框為例來介紹此類組件是如何設計以及實現(xiàn)的。
成品組件用例
按照以往的設計經驗,我們可以先寫出想像中的成品組件用例,這將有助于我們后續(xù)的進一步的設計與實現(xiàn)。垂直分隔框既然是布局類的組件,那么它也一定是一個容器,該容器包含了上述我們提到的三種子級組件。為了使用方便,我們不應該把分隔框也寫進去,分隔框應該由組件內部實現(xiàn)的。經過分析,我們得到下面的一個應用示例:
// 08-01Index: { css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }\ #top, #bottom { width: 100%; height: 100%; background: #AAA; }", xml: "<VDividedBox id='index'>\ <div id='top'/>\ <div id='bottom'/>\ </VDividedBox>"}
該示例由一垂直分隔框組件包裹著兩個 div 元素。這里分別設置兩個 div 元素的寬高為父級的 100%,同時設置它們的背景色為灰色,這只是為了方便測試。另外,我們還需要考慮一個子框的初始比例分配問題。我們可以設置默認比例為 50:50
,比例最好可以在組件實例化時靜態(tài)指定,同時提供比例設置的動態(tài)接口。于是我們就有了下面的改進用例。
// 08-01Index: { css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }\ #top, #bottom { width: 100%; height: 100%; bac