Skip to content
本页目录

网格布局

网格布局相对固定布局来说会灵活很多, 可以用来制作大盘图表或者一些复杂的场景.

grid.png

配置说明

  • 实现接口: dev.fastball.ui.components.layout.LayoutComponent
  • 配置注解: @dev.fastball.ui.components.layout.config.GridLayout
  • 属性说明:
    • cells:
      • 类型: GridCell[]
      • 默认值: 无
      • 配置作用: 网格布局的格子内容
      • 属性说明:
        • component:
          • 类型: Class<Component>
          • 默认值: 无
          • 配置作用: 格子内的组件
        • x:
          • 类型: int
          • 默认值: 0
          • 配置作用: 格子在网格中的 X 轴坐标
        • y:
          • 类型: int
          • 默认值: 0
          • 配置作用: 格子在网格中的 Y 轴坐标
        • width:
          • 类型: int
          • 默认值: 6
          • 配置作用: 格子在网格中的宽度, 即占几列
        • height:
          • 类型: int
          • 默认值: 6
          • 配置作用: 格子在网格中的高度, 即占几行
    • cols:
      • 类型: int
      • 默认值: 12
      • 配置作用: 网格布局的列数
    • rowHeight:
      • 类型: int
      • 默认值: 32
      • 配置作用: 网格的每一行的高度
    • resizable:
      • 类型: boolean
      • 默认值: false
      • 配置作用: 是否可以改变大小
    • draggable:
      • 类型: boolean
      • 默认值: false
      • 配置作用: 是否可以拖动
  • 示例代码链接:
java
@UIComponent
@GridLayout(cells = {
    @GridCell(x = 0, y = 0, width = 3, component = BasicColumnChart.class),
    @GridCell(x = 3, y = 0, width = 3, component = MultipleLineChart.class),
    @GridCell(x = 6, y = 0, width = 3, component = BasicAreaChart.class),
    @GridCell(x = 9, y = 0, width = 3, component = BasicLineChart.class),
    @GridCell(x = 0, y = 6, height = 12, component = MultipleColumnChart.class),
    @GridCell(x = 6, y = 6, component = MultipleAreaChart.class),
    @GridCell(x = 6, y = 12, component = MultipleBarChart.class),
    @GridCell(x = 0, y = 18, width = 12, component = BasicBarChart.class)
})
public class SimpleGridLayout implements LayoutComponent {}