[GEF]在非XYLayout布局的container里调整children尺寸

简介: 以前只做过两种类型的GEF程序,一种是画布使用XYLayout,子图形可以在上面随意改变大小和位置;另一种是画布使用非XYLayout的布局,子图形的大小和位置由布局决定,用户不能用鼠标拖动的方式改变。

以前只做过两种类型的GEF程序,一种是画布使用XYLayout,子图形可以在上面随意改变大小和位置;另一种是画布使用非XYLayout的布局,子图形的大小和位置由布局决定,用户不能用鼠标拖动的方式改变。现在这个项目有点特殊,因为要实现类似“表格”的功能,所以要求画布使用ToolbarLayout排列表格列,但列的高度要能够改变。我查看了FlowLayoutEditPolicy类,里面没有一个类似“createChangeConstraintCommand”这样的方法,那么该怎样实现这个功能呢?

resize-column.gif
图1 画布使用ToolbarLayout同时可以调整列的高度

经过黄老大的指点和查看代码,原来要在画布的EditPolicy里覆盖createChildEditPolicy()方法,FlowLayoutEditPolicy缺省是返回一个NonResizableEditPolicy,我们要改为返回一个ResizableEditPolicy,为了只让用户能拖动列的底部,还要稍微设置一下这个EditPolicy,如下所示:

protected EditPolicy createChildEditPolicy(EditPart child) {
    ResizableEditPolicy policy 
=   new  ResizableEditPolicy();
    policy.setResizeDirections(PositionConstants.SOUTH);
    
return  policy;
}

在运行时,这个被返回的EditPolicy会被安装在child的EditPart上,把我们的画布看作parent,列就是child。当用户拖动列图形的handler时,产生一个类型为REQ_RESIZE的请求,这个请求被转发给parent的EditPolicy,所以我们要在画布的EditPolicy里覆盖getCommand()方法对这个请求进行处理,如下所示:

public Command getCommand(Request request) {
    
if  (REQ_RESIZE_CHILDREN.equals(request.getType())) {
        ChangeColumnHeightCommand cmd 
=   new  ChangeColumnHeightCommand();
        Column column 
=  (Column) ((ColumnPart) ((ChangeBoundsRequest) request).getEditParts().get( 0 )).getModel();
        cmd.setColumn(column);
        cmd.setNewHeight(column.getHeight() 
+  ((ChangeBoundsRequest) request).getSizeDelta().height);
        
return  cmd;
    }
    
return  super.getCommand(request);
}

这就会返回一个用来调整列高度的Command,这个命令的具体内容这里不赘述了。createChildEditPolicy是在LayoutEditPolicy里定义的一个抽象方法,GEF提供的与Layout有关的EditPolicy里都会提供一个缺省的实现,但在需求比较特殊的情况下我们要提供自己的实现。这里是OrderedLayoutEditPolicy(FlowLayoutEditPolicy的父类)关于该方法的注释:“Since Ordered layouts generally don't use constraints, a NonResizableEditPolicy is used by default for children. Subclasses may override this method to supply a different EditPolicy.”很明显GEF已经考虑到了这种情况。

本文转自博客园八进制的博客,原文链接:[GEF]在非XYLayout布局的container里调整children尺寸,如需转载请自行联系原博主。

相关文章
|
9月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
373 1
|
3月前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
114 2
|
6月前
|
前端开发 JavaScript UED
如何巧妙实现element-plus中el-tree-v2的自适应横向滚动?
以上方法描述了如何使用简单的CSS和合适的HTML结构来巧妙实现在Element Plus库中 `el-tree-v2` 组件的自适应横向滚动功能。这种方法易于理解和实现,无需复杂的脚本或框架修改,只需利用CSS的强大功能即可完成。这有助于节省开发时间,同时能够提供良好的用户体验。
394 0
|
9月前
|
Web App开发 小程序 Android开发
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
260 0
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
147 0
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
865 1
|
前端开发
css改变滚动条的颜色-横向滚动demo效果示例(整理)
css改变滚动条的颜色-横向滚动demo效果示例(整理)
如何将空间堆叠起来?Flutter控件之Stack控件
如何将空间堆叠起来?Flutter控件之Stack控件
|
前端开发 容器
通俗重制系列--Grid布局
通俗重制系列--Grid布局
159 0

热门文章

最新文章