布局
线性布局组件
Column列容器中的组件呈垂直方向,从上往下排列,主轴的方向也是竖直从上到下的,交叉轴方向与主轴垂直;
Row行容器中的组件呈水平方向,从左到右排列主轴的方向是水平方向的,交叉轴方向与主轴垂直,组件之间的间距为space。
常见的布局属性
1. justifyContent
设置子元素在**主轴**方向上的对齐格式,参数:FlexAlign枚举
Column({space : 20}){ // space用于调整各容器的间距
Text('item1')
Text('item2')
Text('item3')
Text('item4')
}
.justifyContent(FlexAlign.Center)
/*
* FlexAlign.Center 在居中位置
* FlexAlign.Start 在顶部位置
* FlexAlign.End 在底部位置
* FlexAlign.SpaceBetween 在竖直方向分布 上下不预留空间 中间留空
* FlexAlign.SpaceAround 在竖直方向分布 上下预留间隔的一半空间
* FlexAlign.SpaceEvenly 在竖直方向平均分布 上下和间隔预留相等空间
* */
2. alignItems
设置子元素在**交叉轴**方向的对齐格式,参数:Row容器使用VerticalAlign的枚举、Column容器使用HorizonAlign的枚举。
3. 调整内边距padding
`.padding(20)` padding内边距,上下左右都设置成20
`.padding({top:10,left:20,right:30,bottom:40})` padding传入对象,对四个方向上的内边距分别设置
4. 调整外边距margin
`.margin(20)` margin外边距,上下左右都设置成20
`.margin({top:10,left:20,right:30,bottom:40})`margin传入对象,对四个方向上的外边距分别设置
修改之后的调整图片的代码
import router from '@ohos.router'
@Entry
@Component
struct Index {
@State message1: string = 'Harmony'
@State message2: string = '遥遥领先!'
@State imageWidth : number = 200
build() {
Row() {
Column() {
Image($r('app.media.image'))
.width(this.imageWidth)
.height(200)
.borderRadius(20)
Row() {
Text($r('app.string.width_label'))
.fontSize(25)
TextInput({ placeholder: "请输入图片宽度" }) // 带占位符的文本输入框
.width('40%') // 宽度
.height(40) // 高度
.backgroundColor('#fff') // 类型
.type(InputType.Number) // 输入框的类型 Password、Normal、Email、Number、PhoneNumber
.onChange(value => {
console.log('图片的尺寸是:', value, 'vpx')
this.imageWidth = parseInt(value)
})
}
.justifyContent(FlexAlign.SpaceBetween)
Divider().width('71%')
Row(){
Button('缩小')
.width(100)
.height(50)
.type(ButtonType.Capsule)
.onClick(()=>{
if (this.imageWidth>=10) {
this.imageWidth -= 10
}
})
Button('放大')
.width(100)
.padding({})
.height(50)
.type(ButtonType.Capsule)
.onClick(()=>{
// if (this.imageWidth<=360) {
// this.imageWidth += 10
// }
// 也可以写三元表达式 this.imageWidth<=1600?this.imageWidth+=10:this.imageWidth
})
}
.width('90%')
.padding({top:40})
.margin({bottom:40})
.justifyContent(FlexAlign.SpaceEvenly)
Slider({
min:200, // 滑块的最左边的值
max:1600, // 滑块的最右边的值
value:200, // 初始值、滑块的当前值
step:50, // 滑动一次改变的值,默认值是1
direction:Axis.Horizontal, // Axis.Vertical垂直滑动条、Axis.Horizontal水平滑动条
style:SliderStyle.InSet, // InSet:滑动条内显(宽)、OutSet:滑动条外显(细)
reverse:false // 是否可以改变最大最小值的方向
})
.onChange((value)=>{
this.imageWidth = value
})
.width('90%')
.blockColor('#333') // 滑块的颜色
.showTips(true) // 是否展示百分比
// Column({space : 20}){
// space用于调整各容器的间距
// Text('item1')
// Text('item2')
// Text('item3')
// Text('item4')
// }
// .justifyContent(FlexAlign.Center)
/*
* FlexAlign.Center 在居中位置
* FlexAlign.Start 在顶部位置
* FlexAlign.End 在底部位置
* FlexAlign.SpaceBetween 在竖直方向分布 上下不预留空间 中间留空
* FlexAlign.SpaceAround 在竖直方向分布 上下预留间隔的一半空间
* FlexAlign.SpaceEvenly 在竖直方向平均分布 上下和间隔预留相等空间
* */
}
.width('100%')
}
.height('100%')
}
}