ATKUI(方舟)

写样式的时候，需要先考虑排版，然后在填充内容

容器组件 => 基础组件 build有且只有一个根组件，且根组件是容器组件

文字溢出显示

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column(){
      Text('学前端就来找我吧').width('100%').height(40).fontSize(24)
      Row(){
        Text('置顶 ')
          .fontColor(Color.Red)
        Text('新华社 ')
        Text('4680评论')
      }.width('100%')
      Text('鸿蒙初体验').width('100%').lineHeight(90).fontSize(40).fontWeight(FontWeight.Bold)
      // 文字溢出显示
      Text('方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架方舟开发框架')
        .lineHeight(25).textOverflow({
        overflow: TextOverflow.Ellipsis
      }).maxLines(1)
    }.width('100%')
  }
}

图片加载

加载网络图片

Image('网络url')

加载本地图片

//该图片需要在AppScope/resources/base/media目录下
Image($r('app.media.app_icon')).width(80)

svg图标特点

任意放大缩小不失真，而且可以改颜色

Border学习

边框设置

Text('全边框').padding(5).border({
  width:1,
  color: Color.Red,
  style: BorderStyle.Dotted
})
Text('单侧边框').padding(5).border({
  width:{
    left:1,
    top:2
  },
  color:{
    left:Color.Green,
    top: Color.Yellow
  },
  style:{
    left:BorderStyle.Dashed,
    top:BorderStyle.Solid
  }
})

圆角设置

Text('都是圆角').padding(5).border({
  width:1
}).borderRadius(5)
Text('不都是圆角').padding(5).border({
  width:1
}).borderRadius({
  topRight:5,
  bottomLeft:5
})

// 正圆
Image($r('app.media.app_icon'))
  .width(50)
  .height(50)
  .borderRadius(25)
// 胶囊按钮
Text('你还没打卡哦~')
  .width(120)
  .height(50)
  .padding(5)
  .backgroundColor(Color.Pink)
  .borderRadius(25)

图片学习

背景图片

//第一个参数图片路径，第二个参数是是否平铺，默认不平铺
Text()
  .width(300)
  .height(200)
  .backgroundColor(Color.Pink)
  .backgroundImage($r('app.media.app_icon'),ImageRepeat.XY)

背景位置

在HarmonyOS中默认使用的是vp为单位，vp会基于不同的设备进行自动转换，保证在不同设备上显示的视觉效果是一致的。

Text()
  .width(300)
  .height(200)
  .backgroundColor(Color.Pink)
  .backgroundImagePosition({
      x:100,
      y:100
   })
  //.backgroundImagePosition(Alignment.Center) //通过设置偏移

背景尺寸大小

backgroundImageSize

ImageSize有3个值
Auto，默认值，不进行缩放
Contain，按照组件一边进行等比例缩放。可能存在留白的情况，填不满盒子。
Cover，等比例缩放填充整个组件。可能进行截取，图片显示不完全

//可以直接设置长宽，只设置一个可以进行等比例缩放
.backgroundImageSize({
  width:150,
})

//同样也可以设置枚举值
.backgroundImageSize(ImageSize.Auto)

对齐

主轴对齐

Column和Row使用的对其一致，一个主轴方向是Y，另一个主轴方向是X justifyContent ：可设置枚举，有6个属性

Start
End
Center
SpaceBetween ：贴边显示，中间元素均匀分布
SpaceAround ：间隙环绕分布，中间的间隙更大
SpaceEvenly ：间隙均匀分布，靠边也留有间隙

Column(){
  Text()
    .width(200).height(100)
    .backgroundColor(Color.Pink)
    .border({
      width:1
    })
  Text()
    .width(200).height(100)
    .backgroundColor(Color.Pink)
    .border({
      width:1
    })
  Text()
    .width(200).height(100)
    .backgroundColor(Color.Pink)
    .border({
      width:1
    })
}
.width('100%').height('100%')
.backgroundColor('#ccc')
.justifyContent(FlexAlign.SpaceAround)

交叉轴对齐

属性.alignItems()
参数：枚举类型
- 交叉轴在水平方向Column()：

.alignItems(HorizontalAlign.Start)

HorizontalAlign.Start
HorizontalAlign.Center
HorizontalAlign.End

交叉轴在垂直方向Row():

.alignItems(VerticalAlign.Center)
VerticalAlign.Top
VerticalAlign.Center
VerticalAlign.Bottom

布局

layoutWeight自适应伸缩，按照份数权重，分配剩余空间

Flex布局

Flex({
  direction: FlexDirection.Row,
  justifyContent: FlexAlign.SpaceBetween,
  alignItems: ItemAlign.Center,
  wrap: FlexWrap.Wrap
}){
  Text()
    .width(100).height(30)
    .backgroundColor(Color.Blue)
    .border({width:1,color:Color.Red})
  Text()
    .width(100).height(30)
    .backgroundColor(Color.Blue)
    .border({width:1,color:Color.Red})
  Text()
    .width(100).height(30)
    .backgroundColor(Color.Blue)
    .border({width:1,color:Color.Red})
}
.width('100%').height(300)
.backgroundColor(Color.Pink)

绝对定位

.position，绝对定位，可以控制组件位置，实现层叠效果 .zIndex()默认传入0，可以调整组件层叠效果

.position({
    x:0,
    y:0
})

层叠定位

里面组件从上至下依次层级变高
更加灵活，简便
通过传入对象，控制层叠显示位置

Stack({
  alignContent: Alignment.Bottom
}){}

ArkUI(方舟) 学习