前言

 最近有点忙,好长时间没有学习harmoneyos了, 其实我是有点懒不想学习,哈哈哈哈哈
 最近发现上班经常摸鱼看小说,沉迷电子书,但是又不能长时间抱着手机玩,怕被领导发现,
 于是我有个想法,那就是我自己搞一个小说阅读器的简单版本,在电脑的模拟器上看,说搞就搞,
 先迈出去第一步再考虑能不能做成功;

准备工作

 开发工具:devEco-studio,masterGo,ui设计网站

更新项目结构

新建login/common,login/pages,新建login.ets

设计工作

我想要一个有设计感的页面,但是我没那个设计感咋办呢? 此时就体现出来了设计网站的好处, 我不会设计我还不会照着抄嘛,我在众多选择中选了一个花瓣:/pins/522267…,

设计工具(masterGo)

此处我就照着学习,我也怕侵权,所以我就照着抄一下;我也不是啥专业的产品,也不是啥专业的设计,我一个纯java,业余学习的我就不那么较真儿了,就凑活能用就行,能切图就行;

不得不说我这纯业余的,搞出来的也凑活着能看,哈哈哈 就它了 毕竟花了一个小时搞这个玩意;

URL:/goto/CJ4P1y…邀请您进入《牛马阅读-登陆页》，点击链接开始协作(这个是我的设计地址,你们先设计麻烦的可以凑活用一下我的,此处仅个人学习用,如有侵权,联系可删,请勿商用!!!);

##代码开发

此时前期的必要条件基本上我们都具备了,虽然简陋的具备, 但是不重要;开搞开搞!!

先搞一个列布局, 从上往下布局,我就column了

@Component
@Entry
struct Login {
build() {
  Column() {
    //首先我们预留一个顶部栏的位置, 用来展示手机的一部分信息
    Row() {
    }.width("100%").height("3%")
  }.width("100%")
  .height("100%")
  //背景色渐变
  .linearGradient({
    direction: GradientDirection.Top,
    colors: [["#2dbd94", 0.3], ["#009ffd", 1.0]]
  })}
}

这看起来好像不一样, 哈哈哈哈不重要了,就他了

开始写里边的内容

 //提示语
  Row() {
    Text("Hi~ 欢迎回来")
      .fontSize(30)
      .fontColor(Color.White)
      .fontWeight(FontWeight.Bold)
      .margin({ left: "5%" })
  }.width("100%").height("20%")
  //icon
  Row() {
    Image('/pages/login/common/img/niuma_icon.svg')
      .width(128)
      .height(128)
  }.width("100%").height("20%")
  .justifyContent(FlexAlign.Center)
  //app名称
  Row() {
    Text("niúMǎApp").fontColor("#EFEFEF")
      .fontSize(28)
  }
  .width("100%")
  .height("150px")
  .justifyContent(FlexAlign.Center)
  //用户名输入框
  Row() {
    TextInput({ placeholder: '请输入用户名'})
      .width("80%")
      .height("150px")
      .showUnderline(true)
      .margin({left:"30px"})
  }
  .width("80%")
  .margin({ top: "20px" })
  .backgroundColor("#dc2fbaa9")
  .borderRadius(0)
  //密码输入框
  Row() {
    TextInput({placeholder:"请输入密码"})
      .width("100%")
      .height("150px")
      .showUnderline(true)
      .type(InputType.Password)
      .borderRadius(0)
      .backgroundColor("#dc2fbaa9")
  }
  .width("80%")
  .margin({ top: "20px" })
  //login
  Button("Login",{})
    .stateEffect(true)
    .width("80%")
    .height("130px")
    .margin({top:"50px"})
    .fontSize(20)
    .backgroundColor("#dc2fbaa9")
    .type(ButtonType.Normal)
    .border({color:Color.White,width:"1px"})
  //复选框
  Row(){
    Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
      .select(false)
      .selectedColor(0x39a2db)
      .shape(CheckBoxShape.ROUNDED_SQUARE)
      .onChange((value: boolean) => {
        console.info('Checkbox2 change is' + value)
      })
    Text("我已阅读并接受《个人信息保护提示》")
      .fontSize(13)
      .margin({left:"20px"})
  }.justifyContent(FlexAlign.Start)
  .margin({top:"40px"})
}
.width("100%")
.height("100%")

哎嘿,看起来是那么个样子了,就用这个了,明天搞点击事件;