分隔框（DividedBox）是一种布局类组件，可以分为两种，其中一种叫水平分隔框（HDividedBox），另一种叫垂直分隔框（VDividedBox）。水平分隔框会将其子级分为两列，而垂直分隔框则会将其子级分为两行。列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条。下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的。
成品组件用例
按照以往的设计经验，我们可以先写出想像中的成品组件用例，这将有助于我们后续的进一步的设计与实现。垂直分隔框既然是布局类的组件，那么它也一定是一个容器，该容器包含了上述我们提到的三种子级组件。为了使用方便，我们不应该把分隔框也写进去，分隔框应该由组件内部实现的。经过分析，我们得到下面的一个应用示例：
// 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，比例最好可以在组件实例化时静态指定，同时提供比例设置的动态接口。于是我们就有了下面的改进用例。
// 08-01Index: {
css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }\ #top, #bottom { width: 100%; height: 100%; bac
延伸阅读
- ssh框架
2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁
2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】
2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词
2017-07-26
- 从栈不平衡问题 理解 calling convention
2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解
2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析
2017-07-26
- 集合结合数据结构来看看(二)
2017-07-26
学习是年轻人改变自己的最好方式