HarmonyOS开发 页面的排版主要是通过Row/Column组件来实现
Row(行)、Column(列) ,每个组件之间的间隙叫做间距(space),默认column方向(垂直)为主轴方向。跟他垂直的轴叫交叉轴,默认为Row方向。
属性
1.justifyContent 设置子元素在主轴方向的对齐格式。
参数(FlexAlign枚举)
2.alignItems 设置子元素在交叉轴方向的对齐格式。
参数:Column容器使用HorizontailAlign枚举,Row容器使用verticalAlign枚举。
column实现水平居中
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State imageWidth: number = 300
build() {
Row() {
Column({space:20}) {
Text('item1')
.fontSize(30)
Text('item1')
.fontSize(30)
Text('item1')
.fontSize(30)
Text('item1')
.fontSize(30)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
.height('100%')
}
}
FlexAlign(主轴)属性
start:聚集在方向最上面
center:居中对齐
end:聚集在最下面
SpaceBetween:主轴空间分配到每个元素之间
SpaceAround:首尾元素也分配空间,但是只有中间元素空间的一半
SpaceEvently:每个元素都平均的分配空间。
Row容器也是一样的,只不过变成横向的
alignItems(交叉轴)属性
使用交叉轴属性时候,Column容器使用HorizontailAlign枚举,Row容器使用verticalAlign枚举。
实现页面布局
使用布局手段来实现一个简单页面的排版
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State imageWidth: number = 300
build() {
Column(){
//图片行
Row(){
Image($r("app.media.hongmeng"))
.width(this.imageWidth)
}
.width('100%')
.height(400)
.justifyContent(FlexAlign.Center)
// 输入框行
Row(){
Text($r('app.string.width_label'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
TextInput({text:this.imageWidth.toFixed(0)})
.width(150)
.backgroundColor("#fff")
.type(InputType.Number)
.onChange(value =>{
this.imageWidth = Number(value)
})
}
.width('100%')
.padding({left:20,right:20})
.justifyContent(FlexAlign.SpaceBetween)
// 分割线
Divider()
.width('90%')
//按钮行
Row(){
Button("缩小")
.type(ButtonType.Capsule)
.width(100)
.height(50)
.fontSize(20)
.margin(10)
.onClick(()=>{
if(this.imageWidth >= 30){
this.imageWidth -= 30
}
})
Button("放大")
.type(ButtonType.Capsule)
.width(100)
.height(50)
.fontSize(20)
.onClick(()=>{
if(this.imageWidth <= 300){
this.imageWidth += 30
}
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.margin({top:35,bottom:35})
// 滑块
Slider({
min:100,
max:300,
value:this.imageWidth,
step:10
})
.width('100%')
.blockColor("#ff0000")
.trackThickness(5)
.showTips(true)
.onChange(value =>{
this.imageWidth = value
})
}
.width('100%')
.height('100%')
}
}