TextDemo/entry/src/main/ets/pages/SetServerPage1.ets
2024-08-29 19:08:21 +08:00

130 lines
4.2 KiB
Plaintext

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)
}
}