Seal Report Designer内Views节点支持添加Container Grid Flex View视图控件该控件属于布局视图采用CSS Grid和 Flex布局其下支持添加子视图控件比Container View更灵活便于设计自适应仪表板。Container View相关的属性与View对象属性类似本文主要学习Container Grid Flex View特有的属性用途及使用示例。Is enabled属性设置是否启用Container Grid Flex View控件Container CSS Style属性维护容器的CSS样式Container CSS Class属性维护容器的CSS类Default Items CSS style属性维护容器内所有子视图的默认CSS样式Items CSS Styles属性维护容器内子视图的CSS样式每行代表一个子视图的CSS样式设置例如第一行对应子视图1的CSS样式第二行对应子视图2的CSS样式以此类推Items CSS Style for the HTML Print result属性维护HTML打印时的子视图CSS样式View Restrictions:Force refresh属性值为True则执行筛选条件时强制更新视图。Seal Report Designer软件自带的示例中包括Container Grid Flex View控件的使用示例以10-Container - Grid Flex Layout.srex文件为例位于Samples文件夹内该文件的Views节点中嵌套使用Container Grid Flex View控件。下图中的View对象其下级是单独的Tab Control控件该控件下有3个Tab页每个Tab页都包含嵌套使用的Container Grid Flex View控件。第一个Tab页的顶层Container Grid Flex View控件其下包含8个子视图通过Items CSS Styles属性维护每个子视图的CSS样式主要是宽度设置第7个子视图也是Container Grid Flex View控件其下包含2个子视图通过Container CSS Style属性设置单列布局。效果如下图所示第二个Tab页的顶层Container Grid Flex View控件其下包含8个子视图通过Container CSS Style属性定义三列不等宽网格同时通过Items CSS Styles属性维护每个子视图的CSS样式主要是占用列数设置配置grid-column属性如grid-column: 1 / span 3的意思是从第 1 列开始横跨 3 列第7个子视图也是Container Grid Flex View控件其下包含2个子视图通过Container CSS Style属性设置单列布局。效果如下图所示第三个Tab页的顶层Container Grid Flex View控件其下包含9个子视图通过Container CSS Style属性定义基于网格区域Grid Areas的精确四行四列布局并通过给网格的每个格子命名以精确控制各个子视图的摆放位置然后通过Items CSS Styles属性维护每个子视图的CSS样式主要是设置grid-area也即子视图在网格中的位置第8个子视图也是Container Grid Flex View控件其下包含2个子视图通过Container CSS Style属性设置单列布局。效果如下图所示参考文献[1]https://github.com/ariacom/Seal-Report[2]https://sealreport.org/[3]https://sealreport.org/demo[4]https://sealreport.org/forum/[5]https://github.com/ariacom/Seal-Report/releases[6]https://www.cnblogs.com/Leo_wl/p/7716582.html[7]https://sealreport.org/Help/html/26c7ae63-9b83-dc1d-b5d0-00a18021be41.htm[8]https://sealreport.org/Reports