#星计划#梅科尔工作室HOS-鸿蒙入门应用开发实战分享 原创 精华

Text("欢迎登陆")  
 .fontSize(60).fontWeight(FontWeight.Bold)  
 .fontColor('\#85caf9').position({x:110,y:-240})  
TextInput({ placeholder: "请输入账号" })  
 .width(440).height(40)  
 .backgroundColor('\#fffff')  
 . placeholderColor(Color.Grey)  
 .position({x:20,y:-80 })  
TextInput({ placeholder: "请输入密钥" })  
 .width(440).height(40)  
 . placeholderColor(Color.Grey)  
 .backgroundColor('\#fffff')  
 .type(InputType.Password)  
 .position({x:20,y:-30 })  
//按钮  
Button("登录")  
 .width(440).height(50)  
 .position({x:20,y:20 })  
 .fontWeight(FontWeight.Bold).fontSize(25)  
 .backgroundColor('\#85caf9')  
 .onClick(() =\> {  
 router.pushUrl({  
 url: 'pages/tabbar'  
 })  
 })  
Button("注册")  
 .width(400).height(40)  
 .position({x:40,y:80 })  
 .fontWeight(FontWeight.Normal)  
 .fontColor('\#4264b2').fontSize(20)  
 .backgroundColor('\#fffff')  
 .onClick(() =\> {  
 router.pushUrl({  
 url: 'pages/zhuce'  
 })  
 })

Checkbox()  
Text("已阅读并同意使用服务协议和隐私保护指引")  
 .fontSize(16).fontColor('\#4264b2')

更换其他方式进行登录或找回密钥。

Text("-----其他登陆方式-----")  
 .fontSize(15).width(170).height(100)  
 .position({x:155,y:230 })  
 .fontColor('\#4264b2')  
Column() {  
 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {  
 Text('手机号登录')  
 .fontColor('\#4264b2')  
 Divider().vertical("true").margin(20).height(15)  
 Text('找回密钥')  
 .fontColor('\#4264b2')  
 Divider().vertical("true").margin(20).height(15)  
 Text('其他方式登录')  
 .fontColor('\#4264b2')

Select([{value:'郑州',icon: "/common/yuan.png"},  
 {value:'北京',icon: "/common/2.png"},  
 {value:'杭州',icon: "/common/3.png"},  
 {value:'上海',icon: "/common/4.png"}])  
 .selected(30).value('城市')  
 .font({size: 20, weight:400, family: 'serif', style: FontStyle.Normal })  
 .selectedOptionFont({size: 20, weight: 500, family: 'serif', style: FontStyle.Normal })  
 .optionFont({size: 20, weight: 400, family: 'serif', style: FontStyle.Normal })  
 .onSelect((index:number)=\>{  
 console.info("Select:" + index)  
 }).position({ x: 0, y: 15 })

DatePicker({  
 start: new Date('1970-1-1'),  
 end: **new** Date('2100-1-1'),  
 selected: **this**.selectedDate,  
 })  
 .lunar(this.isLunar)  
 .onChange((value: DatePickerResult) =\> {  
 this.selectedDate.setFullYear(value.year, value.month, value.day)  
 console.info('select current date is: ' + JSON.stringify(value))  
 })  
}

Text('总进度').fontSize(20).fontColor('\#666666').fontWeight(FontWeight.Bold).margin({left :-180})  
Row() {  
 Slider({  
 value: **this**.inSetValue, step: 10, style: SliderStyle.InSet  
 })  
 .blockColor('\#fffff').trackColor('\#fffff')  
 .selectedColor('\#d6edf6').showSteps(**true**)  
 .onChange((value: number, mode: SliderChangeMode) =\> {  
 **this**.inSetValue = value;  
 console.info('value:' + value + 'mode:' + mode.toString());  
 })

Video({  
 src: **this**.videoSrc,  
 previewUri: **this**.previewUri,  
 currentProgressRate: **this**.curRate,  
 controller: **this**.controller  
})

Text('动作识别').fontWeight(FontWeight.Bold).fontSize(30).margin({top : 100,left: 30})  
Text('请面向屏幕根据视频依次做动作').fontSize(20).margin({top :10,left: 30})  

Column({space:30}) {  
 Video({  
 src: **this**.videoSrc,  
 previewUri: **this**.previewUri,  
 currentProgressRate: **this**.curRate,  
 controller: **this**.controller  
 })  
 .width(400)  
.height(200)  
 .autoPlay(**this**.isAutoPlay)  
 .controls(**this**.showControls)  
 .onStart(() =\> {  
 console.info('onStart')  
 })  
 .onFinish(() =\> {  
 console.info('onFinish')  
 })  
 Row({space:100}) {  
 Button('开始').backgroundColor('\#b4dbed')  
 .onClick(() =\> {  
 **this**.controller.start() // 开始播放  
 }).margin(5)  
 //.backgroundColor('\#b4dbed')  
 Button('结束').backgroundColor('\#b4dbed')  
 .onClick(() =\> {  
 **this**.controller.stop() // 结束播放  
 }).margin(5)  
 }.margin({ top: -20})  
}