@Entry
@Component
struct FlexLayout {
@State message: string = '姓名123456'
@State justifyContent: FlexAlign = FlexAlign.Start
@State alignItems: ItemAlign = ItemAlign.Start
@State SpindleDirection: FlexDirection = FlexDirection.Row
build() {
Column({ space: 30 }) {
Row() {
Text(this.message)
.fontWeight(25)
.fontSize(25)
}.margin({ top: 10 })
Flex({ direction: this.SpindleDirection
, justifyContent: this.justifyContent,
alignItems: this.alignItems }) {
Row() {
}.width(50)
.height(50)
.backgroundColor(Color.Red)
.borderRadius(15)
Row() {
}.width(50)
.height(50)
.backgroundColor(Color.Blue)
.borderRadius(15)
Row() {
}.width(50)
.height(50)
.backgroundColor(Color.Green)
.borderRadius(15)
}
.width("95%")
.height('50%')
.backgroundColor(Color.White)
.shadow({ radius: 15, color: "#4b4f514f", })
.borderRadius(15)
Column() {
Column() {
Row() {
Text("主轴的方向")
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.width('100%')
}.width('100%')
List({ space: 25 }) {
ListItem() {
Row() {
Text("Row")
Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(true)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.SpindleDirection = FlexDirection.Row
console.log('FlexDirection status is ' + this.SpindleDirection)
})
}
}
ListItem() {
Row() {
Text("Column")
Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.SpindleDirection = FlexDirection.Column
console.log('FlexDirection status is ' + this.SpindleDirection)
})
}
}
ListItem() {
Row() {
Text("RowReverse")
Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.SpindleDirection = FlexDirection.RowReverse
console.log('FlexDirection status is ' + this.SpindleDirection)
})
}
}
ListItem() {
Row() {
Text("ColumnReverse")
Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.SpindleDirection = FlexDirection.ColumnReverse
console.log('FlexDirection status is ' + this.SpindleDirection)
})
}
}
}.height(40)
.listDirection(Axis.Horizontal)
.width('95%')
.scrollBar(BarState.On)
}.width('100%')
.height('30%')
.justifyContent(FlexAlign.SpaceAround)
Column() {
Row() {
Text("主轴对齐方式").textAlign(TextAlign.Center)
.width('100%')
.fontWeight(FontWeight.Bold)
}.width('100%')
Row() {
Row() {
Text("Start")
Radio({ value: 'Radio2', group: 'radioGroup2' }).checked(true)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.justifyContent = FlexAlign.Start
console.log('justifyContent status is ' + this.justifyContent)
})
}
Row() {
Text("Center")
Radio({ value: 'Radio2', group: 'radioGroup2' }).checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.justifyContent = FlexAlign.Center
console.log('justifyContent status is ' + this.justifyContent)
})
}
Row() {
Text("End")
Radio({ value: 'Radio2', group: 'radioGroup2' }).checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.justifyContent = FlexAlign.End
console.log('justifyContent status is ' + this.justifyContent)
})
}
}.width('100%')
.justifyContent(FlexAlign.SpaceAround)
}.width('100%')
.height('30%')
.justifyContent(FlexAlign.SpaceAround)
Column() {
Row() {
Text("交叉轴对齐方式")
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center).width('100%')
}.width('100%')
Row() {
Row() {
Text("Start")
Radio({ value: 'Radio2', group: 'radioGroup3' }).checked(true)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.alignItems = ItemAlign.Start
console.log('alignItems status is ' + this.alignItems)
})
}
Row() {
Text("Center")
Radio({ value: 'Radio2', group: 'radioGroup3' }).checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.alignItems = ItemAlign.Center
console.log('alignItems status is ' + this.alignItems)
})
}
Row() {
Text("End")
Radio({ value: 'Radio2', group: 'radioGroup3' }).checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
this.alignItems = ItemAlign.End
console.log('alignItems status is ' + this.alignItems)
})
}
}.width('100%')
.justifyContent(FlexAlign.SpaceAround)
}.width('100%')
.height('30%')
.justifyContent(FlexAlign.SpaceAround)
}
.width("95%")
.height('30%')
.justifyContent(FlexAlign.SpaceAround)
.shadow({ radius: 15, color: "#4b4f514f", })
.backgroundColor(Color.White)
.borderRadius(15)
}.width('100%')
.height('100%')
.backgroundColor('#f1f2f1')
}
}
鸿蒙FlexLayout.ets
最新推荐文章于 2024-08-30 16:06:38 发布