布局组件

一些复杂的场景无法用单组件来完成, 因此我们提供了一些布局组件来完成一些复合场景的支持.

嵌套布局

布局之间可以嵌套, 示例工程中就有一个组合布局, 用左右布局内嵌套了上下布局, 示例代码:

java

@UIComponent
@TopAndBottom(
        top = OrgEmployeeTable.class,
        bottom = EmployeeForm.class
)
public class EmployeeTopAndBottomLayout implements LayoutComponent {}

@UIComponent
@LeftAndRight(
        left = OrgTree.class,
        right = EmployeeTopAndBottomLayout.class
)
public class ComposeLayout implements LayoutComponent {}

这种组合布局和上左右布局的差别主要是数据流的触发.

提供的左上下布局, 如果左侧是多数据组件类型, 当点击左侧数据时, 会同时将该记录作为入参传给右侧上下两个组件.

而组合布局则会认为右侧是一个组件, 就会形成左侧触发右侧上部, 右侧上部点击选中再触发右侧下部的过程.

具体可以在示例工程中点击使用一下.

配置说明

所有的布局组件, 都需要继承于 dev.fastball.ui.components.layout.LayoutComponent, 然后通过不同的注解, 来表达不同的布局方式.

因此不同的布局的配置也完全不同, 下面就以各种布局独立描述.

左右布局

实现接口: dev.fastball.ui.components.layout.LayoutComponent
使用场景: 可用于左右格式的布局形式
数据流: 从左至右, 数据流详见联动
配置注解: @dev.fastball.ui.components.layout.config.LeftAndRight
属性说明:
- left:
  - 类型: Class<Component>
  - 默认值: 无
  - 配置作用: 该布局左侧的组件类型
- right:
  - 类型: Class<Component>
  - 默认值: 无
  - 配置作用: 该布局右侧的组件类型
示例代码链接:

java

@UIComponent
@LeftAndRight(
        left = OrgTree.class,
        right = OrgEmployeeTable.class
)
public class EmployeeLeftAndRightLayout implements LayoutComponent {}

界面效果如下:

上下布局

实现接口: dev.fastball.ui.components.layout.LayoutComponent
使用场景: 可用于上下格式的布局形式
数据流: 从上至下, 数据流详见联动
配置注解: @dev.fastball.ui.components.layout.config.TopAndBottom
属性说明:
- top:
  - 类型: Class<Component>
  - 默认值: 无
  - 配置作用: 该布局上侧的组件类型
- bottom:
  - 类型: Class<Component>
  - 默认值: 无
  - 配置作用: 该布局下侧的组件类型
示例代码链接:

java

@UIComponent
@TopAndBottom(
        top = OrgEmployeeTable.class,
        bottom = EmployeeForm.class
)
public class EmployeeTopAndBottomLayout implements LayoutComponent {}

界面效果如下:

左上下布局

实现接口: dev.fastball.ui.components.layout.LayoutComponent
使用场景: 可用于左右格式的布局, 且右侧分上下的场景
数据流: 从左同时至上下, 数据流详见联动
配置注解: @dev.fastball.ui.components.layout.config.LeftAndTopBottom
属性说明:
- left:
  - 类型: Class<Component>
  - 默认值: 无
  - 配置作用: 该布局左侧的组件类型
- top:
  - 类型: Class<Component>
  - 默认值: 无
  - 配置作用: 该布局右上侧的组件类型
- bottom:
  - 类型: Class<Component>
  - 默认值: 无
  - 配置作用: 该布局右下侧的组件类型
示例代码链接:

java

@UIComponent
@LeftAndTopBottom(
        left = OrgTree.class,
        top = OrgDescription.class,
        bottom = OrgBasicBarChart.class
)
public class TreeChartLayout implements LayoutComponent {}

界面效果如下:

布局组件 #

嵌套布局 #

配置说明 #

左右布局 #

上下布局 #

左上下布局 #

布局组件

嵌套布局

配置说明

左右布局

上下布局

左上下布局