鸿蒙学习笔记
第十五节 Column和Row
Column容器里面的组件排成一列(垂直)
Row容器里面的组件排成一行(水平)
space:容器间隔
方法:
justifyContent 设置子元素在主轴方向上对齐格式 FlexAlign枚举
alignItems 设置元素在交叉轴方向上的对齐格式
案例:
@Entry
@Component
struct Index1 {
@State message: string = 'Hello World'
@State imageWidth: number = 30
build() {
Column() {
Row() {
Image($r("app.media.app_icon"))
.width(this.imageWidth)
.interpolation(ImageInterpolation.High)
}
.width("100%")
.height(400)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
Row() {
Text($r('app.string.width_label'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
TextInput({ text: "" + this.imageWidth })
.width(150)
.backgroundColor("#FFF")
.fontSize(20)
.type(InputType.Number)
.onChange(value => {
console.log(value)
this.imageWidth = parseInt(value)
})
}.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.padding({ left: 20, right: 20 })
.margin({ top: 30 })
Row() {
Button("缩小")
.width(100)
.fontSize("30")
.type(ButtonType.Capsule)
.margin({ top: 30, bottom: 30 })
.onClick(() => {
if (this.imageWidth > 10) this.imageWidth -= 10
})
Button("放大")
.width(100)
.fontSize("30")
.type(ButtonType.Capsule)
.onClick(() => {
if (this.imageWidth < 300) this.imageWidth += 10
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.margin({top:30,bottom:30})
Slider({
min: 0,
max: 100,
value: 30,
step: 10,
style: SliderStyle.OutSet,
direction: Axis.Horizontal
})
.width('100%')
.trackThickness(7)
.blockColor('#36D')
.showTips(true)
.onChange(value => {
this.imageWidth = 250 * value / 100
})
}
.width('100%')
}
}