鸿蒙ArkUI基本组件及布局属性【华为根技术】

前端视角的布局，主要需要掌握 display: block, inline, inline-block, flex, grid 这些概念，通过这些 CSS 属性来实现各种各样的布局效果，鸿蒙下并不是直接使用像前端一样通过 CSS 实现一些布局效果，而是提供了一些特殊的布局组件来实现布局效果，接下里我们逐个了解下 鸿蒙下的布局；

布局结构

布局通常是一个树状结构，为实现上述效果，开发者需要在页面中声明对应的元素。其中，Page表示页面的根节点，Column/Row等元素为系统组件。针对不同的页面结构，ArkUI提供了不同的布局组件来帮助开发者实现对应布局的效果

案例截图

1. Text()组件

Text("HarmonyOS的世界")
  // 字号
  .fontSize(16)  
  // 鸿蒙专用字体，一般不用设置
  .fontFamily('HarmonyHeiTi')
  .fontFamily('HarmonyHeiTi-medium')
  // 字体加粗
  //.fontWeight(FontWeight.Bold)
  .fontWeight(700)
  
  //字体颜色，十六进制模式
  .fontColor('#ff0000') 
  // 字体颜色,rgb模式
  .fontColor('rgb(46,46,46)') 
  .fontColor('rgba(46,46,46,0.8)') 
  //字体颜色，颜色枚举
  .fontColor(Color.Red)  
  // 文本对齐方式
  .textAlign(TextAlign.Start)  //左对齐
  // .textAlign(TextAlign.Center) // 居中对齐
  // .textAlign(TextAlign.End)    // 右对齐
  // .textAlign(TextAlign.JUSTIFY) //两端对齐
  
  // 边框
  .border({width: 2, color: 'red'})
  // 显示其中一个边框
  .border({
      width: { bottom: 3 },
      color: '#f9f9f9',
      style: { bottom: BorderStyle.Solid }
   })
  // 行高
  .lineHeight(33)
  // 宽度
  .width(10) 
  //高度
  .height(40) 
  //通用属性，设置元素在容器中的对齐方式
  .align(Alignment.TopStart)
   
   //背景颜色
  .backgroundColor('#ffbb1b') 
  
  // 圆角
  // .borderRadius(3)  
  .borderRadius({
      topLeft: 10,
      topRight: 20,
      bottomRight: 30,
      bottomLeft: 40
    })
    
  // 内边距
  .padding({ left: 15, top: 10, right:10, bottom: 10 })  
  // 四个方向的内边距
  .padding(15) 
  //外边距
  .margin({ left: 5, right: 7 })  
  // 透明度
  .opacity(0.5)  // 0-1
  
  // 显示或隐藏
  // .visibility(Visibility.Visible)
  .visibility(Visibility.Hidden)
  // 事件绑定
  .onClick(()=>{
     
  })
  // 下划线
  .decoration({type: TextDecorationType.Underline})
   // 删除线
  .decoration({type: TextDecorationType.LineThrough})

Column(){
   Text("aaa")
   Text("bbb")
   Text("ccc")
}
//子元素默认水平居中对齐
//下面代码设置子元素水平左对齐
// .alignItems(HorizontalAlign.Start)
//水平右对齐
// .alignItems(HorizontalAlign.End)
..justifyContent(FlexAlign.SpaceBetween)  // 在垂直方向均匀分布

Row(){
   Text("aaa")
   Text("bbb")
   Text("ccc")
}
// 设置子元素的垂直对齐方式
//.alignItems(VerticalAlign.Top)
//.alignItems(VerticalAlign.Center)
.alignItems(VerticalAlign.Bottom)
.justifyContent(FlexAlign.SpaceBetween)

//1. 网络图片
Image("http://mibook-1251592799.file.myqcloud.com/img/f38aa402e4d1d54916af18ebd3c9555a")

//2. 使用本地资源
// 本地图片固定存储地址 【src】【main】【resources】【base】【media】
Image($r("app.media.free"))
    .width('100%')
    // 设置图片的填充效果
    
    //保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
    .objectFit(ImageFit.Contain)
    //保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
    .objectFit(ImageFit.Cover)
    .height(96)
    .borderRadius({
      topLeft: 16,
      topRight: 16
    })

{
  "module": {
    "requestPermissions": [{
      //设置申请网络权限
      "name": "ohos.permission.INTERNET"
    }],
    ...
    }
  }

Swiper() {
  Text("aaa")
  Text("bbb")
  Text("ccc")
}
.width(344)
.height(100)
//循环播放
.loop(true)
//自动播放
.autoPlay(true)
//间隔时间
.interval(3000)
//不显示指示器
.indicator(false)
.indicator(
  new DotIndicator()
    .color('#1a000000')  // 未激活状态的颜色
    .selectedColor('#0A59F7')  // 激活状态的颜色
)