53 lines
2.0 KiB
Plaintext
53 lines
2.0 KiB
Plaintext
|
|
@Entry
|
|
@Component
|
|
struct LinearLayoutPage {
|
|
|
|
columnMargin:number = 8
|
|
columnBgColor:string = '#26c6da'
|
|
@State columnJustifyContent: FlexAlign = FlexAlign.SpaceEvenly;
|
|
@State columnAlignItems :HorizontalAlign = HorizontalAlign.Center;
|
|
|
|
pageTransition() {
|
|
// 定义页面进入时的效果，无论页面栈发生push还是pop操作均可生效
|
|
PageTransitionEnter({ type: RouteType.None, duration: 200 }).opacity(1)
|
|
// 定义页面退出时的效果，无论页面栈发生push还是pop操作均可生效
|
|
PageTransitionExit({ type: RouteType.None, duration: 200 }).opacity(0)
|
|
}
|
|
|
|
build() {
|
|
// Column的子元素垂直排列, 即1列N行
|
|
Column() {
|
|
Row() {
|
|
Text(`Column的子元素垂直排列, 即1列N行, 当前为第1行 \n Column的margin:${this.columnMargin}`)
|
|
.width('100%')
|
|
}.width('80%').height(96).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)
|
|
.borderWidth(1)
|
|
|
|
Column() {
|
|
Text("当前为第2行,不同的justifyContent会影响行之间的间隔");
|
|
Button("切换justifyContent").onClick((event: ClickEvent) => {
|
|
if (this.columnJustifyContent < FlexAlign.SpaceEvenly) {
|
|
this.columnJustifyContent++;
|
|
} else {
|
|
this.columnJustifyContent = 0;
|
|
}
|
|
})
|
|
}.width('80%').height(96).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)
|
|
.borderWidth(1)
|
|
|
|
Column() {
|
|
Text("当前为第3行, 不同的alignItems会影响在水平方向上的对其方式");
|
|
Button("切换alignItems").onClick((event: ClickEvent) => {
|
|
if (this.columnAlignItems < HorizontalAlign.End) {
|
|
this.columnAlignItems++
|
|
} else {
|
|
this.columnAlignItems = 0;
|
|
}
|
|
})
|
|
}.width('80%').height(96).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)
|
|
.borderWidth(1)
|
|
}.height('100%').width('100%').alignItems(this.columnAlignItems).justifyContent(this.columnJustifyContent)
|
|
.backgroundColor('#26c6da')
|
|
}
|
|
} |