重生之我要当前端大王–鸿蒙next篇 01arkUI的使用

重生之我要当前端大王–鸿蒙next篇 01 ArkUI的基本使用

第三篇章 鸿蒙next星河版

前言

阅读本章，了解使用鸿蒙next ArkUI的基本使用

一、基础页面布局组件

使用ArkUI进行页面布局，最重要的离不开俩个元素 Colum、Row，基础的页面由行、列构建出来，让我们看一下他们的基本使用

@Entry
@Component
struct Index {
  @State message: string = 'Hello xxm';
  build() {
    Column() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
  }
}

01文本，输入框，按钮，媒体图片

基础前端页面离不开文本，输入框，按钮，媒体图片…让我们学习一个鸿蒙next的文本，输入框，按钮,图片

1.文本：
在ArkUI中在页面使用文本采用Text(内容)的形式展示文本,通过.属性对文本进行样式装饰
Text('hello xxm')//文本内容
.fontSize(32)//字体大小
.width('100%')//宽度占比
.fontWeight(FontWeight.Bold)//字体加粗

2.输入框：
在ArkUI中在页面使用文本采用TextInput(配置对象).属性对输入框进行样式装饰
    TextInput({
          placeholder:'请输入用户名'  //输入提示
        }).type(InputType.Normal)//输入框类型
3.按钮：
在ArkUI中在页面使用按钮采用Button(按钮信息).属性对按钮进行文本装饰
     Button('登录')//按钮文本
     .width(200)//按钮宽度
     .fontColor(Color.Pink)//按钮文字颜色
     .fontSize(24)//按钮文字大小
4.图片：
图片在ArkUI中大体分为俩种 网络在线图片、本地图片，网络在线图片通过url直接访问，本地图片需要通过$r访问到app下的media下的本地图片
1.加载网络图片
Image('https://www.baidu.com/images/logo.png').height(50)

2.加载本地图片，通过$r读取
 Image($r('app.media.background')).height(50)

02文本，输入框，按钮，图片小案例

接下来写一个小案例使用一下以上介绍的内容
页面效果:

页面代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello xxm';
  build() {
    Column({space:10}) {
      Row(){
        Image($r('app.media.huawei')).height(50)
      }
      Row(){
        TextInput({
          placeholder:'请输入用户名'
        }).type(InputType.Normal)
      }
      Row(){
        TextInput({
          placeholder:'请输入密码'
        }).type(InputType.Password)
      }
      Row(){
        Button('登录').width(200).fontColor(Color.Pink).fontSize(24)
      }
    }
  }
}

二、样式装饰属性，线性布局

01样式装饰属性，线性布局

1.设置宽度、高度、字体颜色、字体大小
 Row(){
       Text('文本内容')
         .fontColor(Color.Pink)//颜色
         .fontSize(32)//字体大小
         .width(100)//宽度
         .height(100)//高度
      }

2.设置边框，边框圆角
2-1.基础使用   
  Text(this.message).fontSize(25)
          .border({
            width:5,//边框大小
            color:Color.Pink,//边框颜色
            style:BorderStyle.Dotted//边框样式
          })
		..borderRadius(10)//设置圆角
		
2-2.设置各边
Text(this.message).fontSize(25)
          .border({
          width:{left:1,right:2,top:3,bottom:4},//设置各边宽度
          color:{left:Color.Pink,right:Color.Blue,top:Color.Orange,bottom:Color.Green},//各边颜色
          style:{
            left:BorderStyle.Dashed,//虚线
            right:BorderStyle.Solid,//实线
            top:BorderStyle.Dotted//点线
          }
    	  .borderRadius({
            topLeft:10,//左上
            topRight:20,//右上
            bottomLeft:30,//左下
            bottomRight:40//右下
          })
         
3.线性布局 
justifyContent //设置主轴元素排布，Column主轴竖直 Row主轴水平
alignItems //设置副轴元素排布，Column副轴水平 Row副轴竖直
Column({space:10}) {
      Row(){
     Text('hello')
      } 
    .justifyContent(FlexAlign.Center)//设置主轴元素排布居中
    .alignItems(HorizontalAlign.Center)//设置副轴元素排布局长
      } 
     .justifyContent(FlexAlign.Center)//设置主轴元素排布居中
    .alignItems(HorizontalAlign.Center)//设置副轴元素排布局长

02 样式装饰属性，线性布局小案例

页面效果:

页面代码:

@Entry
@Component
struct Linearlayout {
  @State message: string = 'Hello xxm';

  build() {
    Column({space:10}) {
      Row(){
        Image($r('app.media.cat')).height(100).width(100).borderRadius(50)
      }
      Row(){
        Image($r('app.media.daka')).height(40).fillColor(Color.White)
        Text('今天还没打卡哦')
          .height(40)
          .width(150)
          .textAlign(TextAlign.Center)
          .borderRadius(20)
          .fontColor(Color.White)
          .borderRadius(10)
      }
      .backgroundColor('#BcBDB9')
      .borderRadius(10)
      .alignItems(VerticalAlign.Center)
      .width(200)
      .padding(5)

      Row(){
        Text('')
          .width('300vp')
          .height('200vp')
          .fontSize(24)
          .fontColor(Color.Pink)
          .backgroundImage($r("app.media.cat"))
          .backgroundImagePosition(Alignment.Center)
          .backgroundImageSize(ImageSize.Cover)
          .borderRadius(10)
      }
      Row({space:10}){
        Text('查看图片').fontSize(20)
        Text('切换图片').fontSize(20)
        Text('删除图片').fontSize(20)
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .width(300)
     Column(){
       Row(){
         Column(){
           Row(){
             Text('玩一玩')
               .fontSize(30)
               .fontStyle(FontStyle.Italic)
               .fontWeight(FontWeight.Bold)
               .margin({left:10})
           }
           Row({space:5}){
             Text('签到兑换').fontSize(18).fontColor(Color.Gray)
             Text('超多大奖').fontSize(18).fontColor(Color.Gray)
             Text('超好玩').fontSize(18).fontColor(Color.Gray)
           }.padding(10)
         }.alignItems(HorizontalAlign.Start).layoutWeight(2)
         Column(){
           Row({space:15}){
             Image($r('app.media.tree')).height(80).backgroundColor('#54888888')
             Text('>').fontSize(30).width(45).fontColor(Color.Gray)
           }
         }.layoutWeight(1)
       }
       .justifyContent(FlexAlign.SpaceBetween)
       .margin({top:10})
       .backgroundColor('#54888888')
       .width('100%')
       .height(100)
       .borderRadius(10)
     }.padding(10)
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}