布局容器
一、线性布局
什么是线性布局
1、线性布局是通过线性容器Row和column构建的，Column容器内子元素垂直方向排列，Row容器内子元素水平方向排列。
2、线性布局对齐方式：
- 主轴: 属性: justifyContent()
- 交叉轴: 属性: alignItems()
二、弹性布局
什么是弹性布局（Flex）
弹性布局分为单行布局和多行布局，Flex容器中的子元素都在一条线（轴线），子元素尺寸总和大于Flex容器尺寸时，子元素尺寸会自动挤压。
参数：warp
值：枚举 FlexWrap
@Entry
@Component
struct Index {
build() {
Column() {
Text('蔬菜')
.fontWeight(600)
.fontSize(24)
.width('100%')
.padding(15)
Flex({ wrap: FlexWrap.Wrap }) {
Text('西红柿')
.padding(10)
.margin(5)
.backgroundColor('#f6f7f9')
Text('黄瓜')
.padding(10)
.margin(5)
.backgroundColor('#f6f7f9')
Text('胡萝卜')
.padding(10)
.margin(5)
.backgroundColor('#f6f7f9')
Text('菠菜')
.padding(10)
.margin(5)
.backgroundColor('#f6f7f9')
Text('大白菜')
.padding(10)
.margin(5)
.backgroundColor('#f6f7f9')
Text('油菜')
.padding(10)
.margin(5)
.backgroundColor('#f6f7f9')
Text('小白菜')
.padding(10)
.margin(5)
.backgroundColor('#f6f7f9')
}
}
.width('100%')
.height('100%')
.padding(10)
}
}
三、层叠布局（堆叠）
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
3.1基本使用
stack组件为容器组件，容器内部包含各种子元素。通过 alignContent 来设置子组件的位置。
@Entry
@Component
struct Index {
build() {
Column(){
Stack() {
Column(){
Text('1')
}
.width('90%')
.height(130)
.backgroundColor(Color.Pink)
Text('2')
.width('60%')
.height('60%')
.backgroundColor(Color.Orange)
Button('3')
.width('30%')
.height('30%')
.fontColor('#000')
}
.width('100%')
.height(150)
.backgroundColor(Color.Pink)
}
.margin(10)
}
}
四、轮播组件
Swiper组件提供滑动轮播显示的能力。
Swiper() {
// 轮播内容
// (设置尺寸，撑开swiper)
}
// 设置尺寸（内容拉伸、优先级高）
.width('100%')
.height(100)
实现轮播效果
@Entry
@Component
struct Page01_Swiper {
// Swiper 基本使用
build() {
Column() {
Text('Swiper基本使用')
.fontSize(20)
.fontWeight(900)
.padding(10)
Swiper() {
Text('菠菜')
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.fontColor(Color.White)
.fontSize(30)
Text('哈密瓜')
.textAlign(TextAlign.Center)
.backgroundColor(Color.Green)
.fontColor(Color.White)
.fontSize(30)
Text('草莓')
.textAlign(TextAlign.Center)
.backgroundColor(Color.Blue)
.fontColor(Color.White)
.fontSize(30)
}
.width('100%')
.height(100)
.loop(true) // 是否开启循环 true/false
.autoPlay(true) // 是否自动播放 true/false
.interval(2000) // 自动播放时间间隔 单位毫秒
}
.width('100%')
.height('100%')
}
}
五、网格布局Grid/GridItem
网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。 ♥ Grid的子组件必须是GridItem组件，需要展示的内容设置在GridItem中
♥ GridItem只能由一个子组件
五(1)固定行列（不滚动）
Grid() {
GridItem(){
// 展示的内容放在这里 只能写一个子组件
}
GridItem(){
// 展示的内容放在这里 只能写一个子组件
}
}
| 名称 | 参数类型 | 描述 |
|---|---|---|
| columnsTemplate | string | 设置当前网格布局列的数量或最小列宽值，不设置时默认1列。例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。 |
| rowsTemplate | string | 设置当前网格布局行的数量或最小行高值，不设置时默认1行。例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 |
| columnsGap | Length | 设置列与列的间距。默认值：0 |
| rowsGap | Length | 设置行与行的间距。默认值：0 |
五（2）合并行列
属性：
| 名称 | 参数类型 | 描述 |
|---|---|---|
| rowStart | number | 指定当前元素起始行号。 |
| rowEnd | number | 指定当前元素终点行号。 |
| columnStart | number | 指定当前元素起始列号。 |
| columnEnd | number | 指定当前元素终点列号。 |
快速生成特定长度的数组Array.from({ length: 30 })
@Entry
@Component
struct Page10_Grid_Merge {
nums: number[] = Array.from({ length: 12 })
build() {
Column() {
Text('合并行列')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid() {
ForEach(this.nums, (item: number, index: number) => {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
})
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr')
.width('100%')
.height(260)
.rowsGap(10)
.columnsGap(10)
.padding(10)
}
.width('100%')
.height('100%')
}
}
五（3）设置滚动
设置方式：
- 水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。
- 垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向
@Extend(Text)
function newExtend() {
.width('100%')
.height('100%')
.fontSize(30)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
@Entry
@Component
struct Page11_Grid_Scroll {
list: string[] = Array.from({ length: 30 })
build() {
Column() {
Text('设置滚动')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid() {
ForEach(this.list, (item: string, index) => {
GridItem() {
Text((index + 1).toString())
.newExtend()
}
.padding(5)
.backgroundColor('#0094ff')
.height('25%') // 竖向滚动-通过 height 设置高度
.width('25%') // 横向滚动 通过 width 设置宽度
})
}
.columnsTemplate('1fr 1fr 1fr') // 竖向滚动 固定列数
// .rowsTemplate('1fr 1fr 1fr') // 横向滚动 固定行数
.rowsGap(10)
.columnsGap(10)
.width('100%')
.height(300)
.border({ width: 1 })
.padding(5)
}
.width('100%')
.height('100%')
}
}
绝对定位、相对定位
- 绝对定位：
position，相对父组件左上角进行偏移, 不占位置
@Entry
@Component
struct Index {
build() {
Column() {
Text('文字内容')
.width(80)
.height(40)
.backgroundColor(Color.Pink)
.position({
x: 0,
y: 0
})
}
.width('100%')
.height(200)
.backgroundColor('#ccc')
}
}
- 相对定位：
offset，相对自身左上角进行偏移, 占位置
@Entry
@Component
struct Index {
build() {
Column() {
Text('内容1')
.width(80)
.height(40)
.backgroundColor(Color.Pink)
Text('内容2')
.width(80)
.height(40)
.backgroundColor(Color.Orange)
// 占位
.offset({
x: 100,
y: -30
})
Text('内容3')
.width(80)
.height(40)
.backgroundColor(Color.Brown)
}
.width('100%')
.height(200)
.backgroundColor('#ccc')
}
}
