几种不同的方式

entry/src/main/ets/pages/Index.ets

@@ -1,34 +1,33 @@
-class ViewModel {
-  message: string = 'Hello World'
-
-
-  startTimer() {
-    setTimeout(() =>{
-      this.message = 'timer';
-    }, 1000)
-  }
-
-}
+import './SetServerPage'
+import './SetServerPage1'
+import './SetServerPage2'
+import './SetServerPage3'
 
 @Entry({routeName: 'Index'})
 @Component
 struct Index {
-  @State viewModel: ViewModel = new ViewModel();
 
   build() {
     Column() {
-      CodeInputText({
-        inputText: this.viewModel.message,
-        hintText: this.viewModel.message,
-        onInputChanged: (value) => {
-          this.viewModel.message = value;
-        }
-      });
 
-      TextInput({text: 'test'}).margin({top: 8})
+      Button('SerServerPage').width('80%')
+        .onClick(() => {
+          this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer'})
+        })
 
-      Button('start timer').onClick(() =>{
-        this.viewModel.startTimer();
+      Button('SerServerPage1').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer1'})
+        })
+
+      Button('SerServerPage2').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer2'})
+        })
+
+      Button('SerServerPage3').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.getUIContext().getRouter().pushNamedRoute({name: 'SetServer3'})
         })
     }
     .height('100%')
@@ -36,20 +35,3 @@ struct Index {
     .justifyContent(FlexAlign.Center)
   }
 }
-
-@Component
-struct CodeInputText {
-
-  @Prop inputText: string;
-  @Prop hintText: string;
-  onInputChanged?: (value: string) => void;
-
-  build() {
-    Column(){
-      Text(this.hintText)
-      TextInput({text: this.inputText}).onChange((value) => {
-        this.onInputChanged?.(value);
-      }).margin({top: 8})
-    }.width('100%')
-  }
-}

entry/src/main/ets/pages/SetServerPage.ets

@@ -0,0 +1,130 @@
+import { SetServerViewModel } from './SetServerViewModel';
+
+
+@Entry({ routeName: 'SetServer' })
+@Component
+struct SetServerPage {
+
+  @State viewModel: SetServerViewModel = new SetServerViewModel();
+  @State operation: string = ''
+  appendOperationLog(info: string) {
+    this.operation += `${info}\n`
+  }
+
+  aboutToAppear(): void {
+    this.viewModel.savedServer.httpPort = '6000'
+    this.viewModel.savedServer.httpsPort = '6443'
+    this.appendOperationLog('aboutToAppear set 6xx');
+  }
+
+  onPageShow(): void {
+    this.viewModel.savedServer.httpPort = '7000'
+    this.viewModel.savedServer.httpsPort = '7443'
+    this.appendOperationLog('aboutToAppear set 7xx');
+  }
+
+  build() {
+    Column() {
+
+      Text(this.operation).width('100%').padding({left: 16, right: 16})
+
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+      }) {
+        Text('host').margin({ left: 20 }).maxLines(1).fontSize(15)
+
+        TextInput({ text: this.viewModel.savedServer.host }).maxLines(1).textAlign(TextAlign.End).type(InputType.Normal)
+          .backgroundColor(Color.White)
+          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+          .onChange((value) => {
+            this.viewModel.savedServer.host = value;
+          })
+      }
+      .width('100%')
+      .margin({ top: 16 })
+      .backgroundColor(0xfff000)
+      .height(48)
+      .backgroundColor(Color.White)
+
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+      }) {
+        Text('httpPort').margin({ left: 20 }).maxLines(1).fontSize(15)
+
+        TextInput({ text: this.viewModel.savedServer.httpPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number)
+          .backgroundColor(Color.White)
+          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+          .onChange((value) => {
+            this.viewModel.savedServer.httpPort = value;
+          })
+      }
+      .width('100%')
+      .margin({ top: 16 })
+      .backgroundColor(0xfff000)
+      .height(48)
+      .backgroundColor(Color.White)
+
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+      }) {
+        Text('httpsPort').margin({ left: 20 }).maxLines(1).fontSize(15)
+
+        TextInput({ text: this.viewModel.savedServer.httpsPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number)
+          .backgroundColor(Color.White)
+          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+          .onChange((value) => {
+            this.viewModel.savedServer.httpsPort = value;
+          })
+      }
+      .width('100%')
+      .margin({ top: 16 })
+      .backgroundColor(0xfff000)
+      .height(48)
+      .backgroundColor(Color.White)
+
+
+      Button('8xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.savedServer.httpPort = '8008'
+          this.viewModel.savedServer.httpsPort = '8443'
+          this.appendOperationLog('Button click set 8xx');
+        })
+
+      Button('9xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.enableSave = !this.viewModel.enableSave;
+          this.viewModel.savedServer.httpPort = '9000'
+          this.viewModel.savedServer.httpsPort = '9443'
+          this.appendOperationLog('Button click set 9xx with enableSave');
+        })
+    }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center)
+  }
+}
+
+@Component
+struct InputItem {
+  @State hint: string = ''
+  @State inputText: string = ''
+  @State inputType: InputType = InputType.Normal;
+  onInputChanged?: (value: string) => void;
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+    }) {
+      Text(this.hint).margin({ left: 20 }).maxLines(1).fontSize(15)
+
+      TextInput({ text: this.inputText }).maxLines(1).textAlign(TextAlign.End).type(this.inputType)
+        .backgroundColor(Color.White)
+        .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+        .onChange((value) => {
+          this.onInputChanged?.(value);
+        })
+    }
+    .width('100%')
+    .margin({ top: 16 })
+    .backgroundColor(0xfff000)
+    .height(48)
+    .backgroundColor(Color.White)
+  }
+}

entry/src/main/ets/pages/SetServerPage1.ets

@@ -0,0 +1,130 @@
+import { SetServerViewModel } from './SetServerViewModel';
+
+
+@Entry({ routeName: 'SetServer1' })
+@Component
+struct SetServerPage {
+
+  @State viewModel: SetServerViewModel = new SetServerViewModel();
+  @State operation: string = ''
+  appendOperationLog(info: string) {
+    this.operation += `${info}\n`
+  }
+
+  aboutToAppear(): void {
+    this.viewModel.savedServer.httpPort = '6000'
+    this.viewModel.savedServer.httpsPort = '6443'
+    this.appendOperationLog('aboutToAppear set 6xx');
+  }
+
+  onPageShow(): void {
+    this.viewModel.enableSave = !this.viewModel.enableSave
+    this.viewModel.savedServer.httpPort = '7000'
+    this.viewModel.savedServer.httpsPort = '7443'
+    this.appendOperationLog('aboutToAppear set 7xx with enableSave');
+  }
+
+  build() {
+    Column() {
+      Text(this.operation).width('100%').padding({left: 16, right: 16})
+
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+      }) {
+        Text('host').margin({ left: 20 }).maxLines(1).fontSize(15)
+
+        TextInput({ text: this.viewModel.savedServer.host }).maxLines(1).textAlign(TextAlign.End).type(InputType.Normal)
+          .backgroundColor(Color.White)
+          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+          .onChange((value) => {
+            this.viewModel.savedServer.host = value;
+          })
+      }
+      .width('100%')
+      .margin({ top: 16 })
+      .backgroundColor(0xfff000)
+      .height(48)
+      .backgroundColor(Color.White)
+
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+      }) {
+        Text('httpPort').margin({ left: 20 }).maxLines(1).fontSize(15)
+
+        TextInput({ text: this.viewModel.savedServer.httpPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number)
+          .backgroundColor(Color.White)
+          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+          .onChange((value) => {
+            this.viewModel.savedServer.httpPort = value;
+          })
+      }
+      .width('100%')
+      .margin({ top: 16 })
+      .backgroundColor(0xfff000)
+      .height(48)
+      .backgroundColor(Color.White)
+
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+      }) {
+        Text('httpsPort').margin({ left: 20 }).maxLines(1).fontSize(15)
+
+        TextInput({ text: this.viewModel.savedServer.httpsPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number)
+          .backgroundColor(Color.White)
+          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+          .onChange((value) => {
+            this.viewModel.savedServer.httpsPort = value;
+          })
+      }
+      .width('100%')
+      .margin({ top: 16 })
+      .backgroundColor(0xfff000)
+      .height(48)
+      .backgroundColor(Color.White)
+
+
+      Button('8xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.savedServer.httpPort = '8008'
+          this.viewModel.savedServer.httpsPort = '8443'
+          this.appendOperationLog('Button click set 8xx');
+        })
+
+      Button('9xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.enableSave = !this.viewModel.enableSave;
+          this.viewModel.savedServer.httpPort = '9000'
+          this.viewModel.savedServer.httpsPort = '9443'
+          this.appendOperationLog('Button click set 9xx with enableSave');
+        })
+    }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center)
+  }
+}
+
+@Component
+struct InputItem {
+  @State hint: string = ''
+  @State inputText: string = ''
+  @State inputType: InputType = InputType.Normal;
+  onInputChanged?: (value: string) => void;
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+    }) {
+      Text(this.hint).margin({ left: 20 }).maxLines(1).fontSize(15)
+
+      TextInput({ text: this.inputText }).maxLines(1).textAlign(TextAlign.End).type(this.inputType)
+        .backgroundColor(Color.White)
+        .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+        .onChange((value) => {
+          this.onInputChanged?.(value);
+        })
+    }
+    .width('100%')
+    .margin({ top: 16 })
+    .backgroundColor(0xfff000)
+    .height(48)
+    .backgroundColor(Color.White)
+  }
+}

entry/src/main/ets/pages/SetServerPage2.ets

@@ -0,0 +1,79 @@
+import { SetServerViewModel } from './SetServerViewModel';
+
+@Entry({ routeName: 'SetServer2' })
+@Component
+struct SetServerPage {
+
+  @State viewModel: SetServerViewModel = new SetServerViewModel();
+  @State operation: string = ''
+  appendOperationLog(info: string) {
+    this.operation += `${info}\n`
+  }
+
+  aboutToAppear(): void {
+    this.viewModel.savedServer.httpPort = '6000'
+    this.viewModel.savedServer.httpsPort = '6443'
+    this.appendOperationLog('aboutToAppear set 6xx');
+  }
+
+  onPageShow(): void {
+    this.viewModel.savedServer.httpPort = '7000'
+    this.viewModel.savedServer.httpsPort = '7443'
+    this.appendOperationLog('aboutToAppear set 7xx');
+  }
+
+  @Builder
+  inputItem(hint: ResourceStr, inputText: string, inputType: InputType, onInputChanged: (value: string) => void) {
+    Flex({
+      justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+    }) {
+      Text(hint).margin({ left: 20 }).maxLines(1).fontSize(15)
+
+      TextInput({ text: inputText }).maxLines(1).textAlign(TextAlign.End).type(inputType)
+        .backgroundColor(Color.White)
+        .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+        .onChange((value) => {
+          onInputChanged(value);
+        })
+    }
+    .width('100%')
+    .margin({ top: 16 })
+    .backgroundColor(0xfff000)
+    .height(48)
+    .backgroundColor(Color.White)
+  }
+
+
+  build() {
+    Column() {
+      Text(this.operation).width('100%').padding({left: 16, right: 16})
+
+      this.inputItem('host', this.viewModel.savedServer.host, InputType.Normal, (value) => {
+        this.viewModel.savedServer.host = value;
+      })
+
+      this.inputItem('httpPort', this.viewModel.savedServer.httpPort, InputType.Normal, (value) => {
+        this.viewModel.savedServer.httpPort = value;
+      })
+
+      this.inputItem('httpsPort', this.viewModel.savedServer.httpsPort, InputType.Normal, (value) => {
+        this.viewModel.savedServer.httpsPort = value;
+      })
+
+      Button('8xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.savedServer.httpPort = '8008'
+          this.viewModel.savedServer.httpsPort = '8443'
+          this.appendOperationLog('Button click set 8xx');
+        })
+
+      Button('9xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.enableSave = !this.viewModel.enableSave;
+          this.viewModel.savedServer.httpPort = '9000'
+          this.viewModel.savedServer.httpsPort = '9443'
+          this.appendOperationLog('Button click set 9xx with enableSave');
+        })
+    }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center)
+  }
+}

entry/src/main/ets/pages/SetServerPage3.ets

@@ -0,0 +1,100 @@
+import { SetServerViewModel } from './SetServerViewModel';
+
+@Entry({ routeName: 'SetServer3' })
+@Component
+struct SetServerPage {
+
+  @State viewModel: SetServerViewModel = new SetServerViewModel();
+  @State operation: string = ''
+  appendOperationLog(info: string) {
+    this.operation += `${info}\n`
+  }
+
+  aboutToAppear(): void {
+    this.viewModel.savedServer.httpPort = '6000'
+    this.viewModel.savedServer.httpsPort = '6443'
+    this.appendOperationLog('aboutToAppear set 6xx');
+  }
+
+  onPageShow(): void {
+    this.viewModel.savedServer.httpPort = '7000'
+    this.viewModel.savedServer.httpsPort = '7443'
+    this.appendOperationLog('aboutToAppear set 7xx');
+  }
+
+  build() {
+    Column() {
+      Text(this.operation).width('100%').padding({left: 16, right: 16})
+
+      InputItem({
+        hint: 'host',
+        inputText: this.viewModel.savedServer.host,
+        inputType: InputType.Normal,
+        onInputChanged: (value) => {
+          this.viewModel.savedServer.host = value;
+        }
+      })
+
+      InputItem({
+        hint: 'httpPort',
+        inputText: this.viewModel.savedServer.httpPort,
+        inputType: InputType.Normal,
+        onInputChanged: (value) => {
+          this.viewModel.savedServer.httpPort = value;
+        }
+      })
+
+      InputItem({
+        hint: 'httpsPort',
+        inputText: this.viewModel.savedServer.httpsPort,
+        inputType: InputType.Normal,
+        onInputChanged: (value) => {
+          this.viewModel.savedServer.httpsPort = value;
+        }
+      })
+
+      Button('8xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.savedServer.httpPort = '8008'
+          this.viewModel.savedServer.httpsPort = '8443'
+          this.appendOperationLog('Button click set 8xx');
+        })
+
+      Button('9xx').margin({ top: 24 }).width('80%')
+        .onClick(() => {
+          this.viewModel.enableSave = !this.viewModel.enableSave;
+          this.viewModel.savedServer.httpPort = '9000'
+          this.viewModel.savedServer.httpsPort = '9443'
+          this.appendOperationLog('Button click set 9xx with enableSave');
+        })
+    }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center)
+  }
+}
+
+@Component
+struct InputItem {
+  @Prop hint: string = ''
+  @Prop inputText: string = ''
+  @State inputType: InputType = InputType.Normal;
+  onInputChanged?: (value: string) => void;
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
+    }) {
+      Text(this.hint).margin({ left: 20 }).maxLines(1).fontSize(15)
+
+      TextInput({ text: this.inputText }).maxLines(1).textAlign(TextAlign.End).type(this.inputType)
+        .backgroundColor(Color.White)
+        .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
+        .onChange((value) => {
+          this.onInputChanged?.(value);
+        })
+    }
+    .width('100%')
+    .margin({ top: 16 })
+    .backgroundColor(0xfff000)
+    .height(48)
+    .backgroundColor(Color.White)
+  }
+}

entry/src/main/ets/pages/SetServerViewModel.ets

@@ -0,0 +1,15 @@
+export class SetServerViewModel {
+  savedServer: ServerAddress;
+  enableSave: boolean = true;
+
+  constructor() {
+    this.savedServer = new ServerAddress();
+  }
+}
+
+@Observed
+export class ServerAddress {
+  host: string = 'host';
+  httpPort: string = '80';
+  httpsPort: string = '443';
+}