Flex侧边停靠窗口

  下图是 Microsoft Visual Studio IDE 的部分截图。

  [img]http://dl.iteye.com/upload/attachment/164551/108c5039-8fa2-3b8f-99a7-52e3f371e396.gif[/img]

  这是一种可停靠的窗口,窗口标题栏第二个按钮可以控制窗口是否停靠。窗口处于停靠状态时就会与主界面融为一体,可以通过点击窗口下方(如果可停靠窗口处于整体布局下方的话)的TabBar来选择显示哪一个窗口;而非停靠状态的窗口则不会占据整体布局的空间,仅作为弹出窗口出现,TabBar只占据整体布局边侧的一小条空间,此时鼠标移向TabBar上的一个Tab则对应的窗口就会弹出,移开鼠标窗口也随之隐藏。这种侧边可停靠窗口是非常友善的用户界面,用Flex做前端界面时我们希望也能用上它。然而Flex并没有提供类似的组件,没关系,我们可以自己动手实现这种停靠窗口。
  粗看之下,似乎用TabNavigator组件就可实现类似的效果,不过TabNavigator组件的TabBar好像只能在上方。而这种停靠窗口需要在上、下、左、右四个方向停靠,因此TabBar也需要能分别出现在各个方向,所以需要用一个容器嵌套ViewStack(里面嵌套可停靠窗口DockablePanel)及TabBar来实现。然而TabBar也不能完全符合要求,首先TabBar中的文本方向不能控制,其次每个Tab需要有两种状态,即由鼠点击控制选中/非选中以及鼠标移进自动选中移出则变为未选中。因此我们需要自己实现一个TabBar或者说是DockBar。
  停靠窗口的停靠/非停靠状态的控制也有点棘手。如果是绝对布局,那么很好办,只要控制窗口的位置就可以了。但对于非绝对布局来说简单地改变位置就行不通了。不过倒是可以借助PopUpManager的addPopUp与removePopUp方法:当窗口处于停靠状态时,就把它放进ViewStack里,处于非停靠状态时就把它从ViewStack移中,并将其添加为弹出窗口。且记停靠窗口从ViewStack中移出或用PopUpManager的removePopUp移除后一定要设置它的includeInLayout属性为false,否则就达不到预想的效果。
  停靠窗口(DockablePanel)的标题栏上还需要加一个停靠按钮,继承Panel后要创建这样一个按钮并把它加入到Panel的titleBar里。
  侧边停靠窗口的实现大体就是这样的。我试着写了一下,基本实现了大部分的功能,不过代码比较滥,BUG也不少。
  下图是我的Demo:

  [img]http://dl.iteye.com/upload/attachment/164568/77d44d64-6c1c-3e1a-95df-8f50b5befb08.jpg[/img]

  [url=http://dl.iteye.com/topics/download/6ff38ac5-c81f-3613-b68a-cf21051a9546]下载源码与程序[/url]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值