Grid布局
- 想要控制屏幕的分栏 分几列, 怎么分 特别像前端的栅格布局
- Row组件默认情况下,里面的元素的纵向是居中的
- Column组件默认横向是居中的
注意:Grid组件下只能放置GridItem组件
Grid可以设置columnsTemplate和rowsTemplate
columnsTemplate是设置横向的分配,如果设置 1fr 1fr 表示,等分为两份, 如果设置1fr 2fr表示左边一份,右边两份, 在设置columnsTemplate不设置rowsTemplate的情况下,如果内容超出容器区域,会自动出现滚动条 columnsGap设置列和列之间的间距,rowsGap设置行和行之间的间距
borderRadius 这个是设置圆角的一个属性,一般再容器布局里面的,这里插一个主要是写到这里的时候看到了
这个不知道什么意思于是查了一下然后就记录到这里了
.columnsTemplate('1fr 1fr')这个是控制每个组件之间的一个间距的,里面的fr代表份数几个fr就代表几分
然后fr前面的数字代表一份占几个位置
.columnsGap(10)是一个Grid中的一个属性,是控制布局的每个组件之间的间距的,这个是每个列之间的
.rowsGap(10) 与上面一样,这个是每个列之间的一个间距
.padding(10) 这个是控制上下左右四个方向的一个间距,是这整个组件的一个间距上面的是单个组件之间的
这个组件的使用方法
首先我们可以先定义好我们的一个Grid
下面是一个关于这个组件做的一个小案例
效果图片
上面的案例的对应的代码
@Entry
@Component
struct GridCase {
build() {
Grid(){
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
GridItemCase()
}
.width('100%')
.height('100%')
.columnsTemplate('1fr 1fr')
.columnsGap(10)//是一个Grid中的一个属性,是控制布局的每个组件之间的间距的,这个是每个列之间的
.rowsGap(10)//与上面一样,这个是每个列之间的一个间距
.padding(10)
}
}
//再这里定义子组件,一个自定义组件结构
@Component
struct GridItemCase {
build() {
//Grid布局里面的子组件必须是GridItem组件,不然的话显示不出来效果
GridItem(){
Row(){
//因为Column和Row这两个组件默认都是居中的,所以我为了居中
Column(){
Text('内容')//这里放一个文本框
}
.width('100%')
}
.height(200)
//设置子组件的边框圆角
.borderRadius(4)
//设置子组件的背景颜色
.backgroundColor(Color.Pink)
}
}
}