grid-panel
布局类似于collection-view
的布局,但是相比collection-view
来说,没有header、footer、section等概念,只是单纯的一个布局面板。grid-panel
会自动计算本身的高度,并且会显示所有的子元素,因此更适合在列表中作为宫格布局使用。collection-view
并不会自动计算自身的高度,只是计算内部容器的高度,因此就不适合在列表中嵌套使用。
grid-panel
目前只支持从做左到右、从上到下的布局,可以指定colunms
,暂不支持指定rows
,这个设定跟collection-view
是一样的。
由于grid-panel
会显示所有的子元素,因此不适合显示大量数据。如果需要显示大量数据的,那就使用collection-view
来显示。
名称 | 数据类型 | 介绍 | 是否支持绑定 | 是否支持动画 |
---|---|---|---|---|
columns | Integer | 列数,默认1. | 否 | 否 |
column-spacing | flaot | 列间距。 | 否 | 否 |
row-spacing | flaot | 行间距。 | 否 | 否 |
名称 | 数据类型 | 介绍 |
---|---|---|
grid-panel.column-span | Integer | 跨列数量。 |
简单的九宫格布局。
1 | <grid-panel columns="3" column-spacing="10" row-spacing="10"> |
九宫格布局使用
stack-panel
其实也能实现,但是stack-panel
并没有column
的概念,因此在列的实现上面将会比较麻烦。而使用grid-panel
来布局是一件非常简单的事情。
瀑布流布局。
1 | <grid-panel columns="3" column-spacing="10" row-spacing="10"> |
column-span
1 | <grid-panel columns="3" column-spacing="10" row-spacing="10"> |