修改首页布局以及添加本地签名

app/src/main/ets/pages/layout/LinearLayoutPage.ets

@@ -3,21 +3,51 @@
 @Component
 struct LinearLayoutPage {
 
-  @State space: number = 10;
+  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({ space: '5' }) {
-      Text(`space:${this.space}`)
-      Row({ space: this.space}){
-        Column().height('100%').width('25%').backgroundColor("#ff5577")
-        Column().height('100%').width('25%').backgroundColor("#ff5577")
-        Column().height('100%').width('20%').backgroundColor("#ff5577")
-        Column().height('100%').width('20%').backgroundColor("#ff5577")
-      }.width('90%').height('10%').backgroundColor("#11ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-      Row().width('90%').height('10%').backgroundColor("#ff4455")
-    }.width('100%')
+    // 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')
   }
 }