Harmony------ArkUI

已于 2024-08-10 13:21:08 修改
阅读量254 收藏
点赞数 2
分类专栏： Harmony 文章标签： 学习 harmonyos
于 2024-07-21 02:11:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao2218897/article/details/140579539
版权

ArkUI(方舟开发框架)是一套构建鸿蒙应用界面的框架，构建页面的最小单位就是组件，布局思路：先排版，再放内容，再美化。

官网图标库：HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟

组件分类：

  1. 基础组件：界面呈现的基本元素：文字 图片 按钮等

  2. 容器组件：控制布局：Row Column等

字重

Text('小说分类')
        .width('100%').height(50)
        .fontSize(20)
        .fontWeight(700)  //100-900的数字 加粗700  默认400
        .fontWeight(FontWeight.Bold)
        .fontColor('#666')

文字溢出省略号

Text('小说简介小说简介小说简介小说简介小说简介小说简介小说简介小说简介小说简介小说简介小说简介小说简介小说简介')
        .width('100%')
        .lineHeight(26)
        .textOverflow({
          overflow:TextOverflow.Ellipsis
        })
        .maxLines(1)

内边距 外边距  边框   圆角

Text('小说作者')
        .width(200).height(30)
        .fontSize(20)
        .fontColor('#666')
        .padding({
          left:30
        })
        .margin({
          top:20
        })
        .border({
          width:1,
          color:Color.Red,
          style:BorderStyle.Solid
        })
        .border({
          width:{left:1,right:2},
          color:{left:Color.Red,right:Color.Blue},
          style:{
            left:BorderStyle.Solid,
            right:BorderStyle.Dotted
          }
        })
        .borderRadius(30)
        .borderRadius({
          topLeft:20,
          topRight:10,
          bottomLeft:20,
          bottomRight:10
        })

背景图片以及尺寸

Text('我是背景文本')
        .width(200).height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.startIcon'),ImageRepeat.X)//平铺，不设置默认没有
        .backgroundImage($r('app.media.startIcon'))
        .backgroundImagePosition(Alignment.Center)
        .backgroundImageSize(ImageSize.Contain)

登录 密码 框

build() {
    Column({space:10}){
      TextInput({
        text:'admin'
      })
        .width('100%')
      TextInput({
        placeholder:'请输入密码'
      })
        .type(InputType.Password)
        .width('100%')
      Button('登录')
        .width(250)
    }
    .width('100%')
    .padding(20)
  }

 主轴对齐方式.justifyContent

  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin(10)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)  
  }
}

交叉轴对齐方式.alignItems()

交叉轴水平方向：HorizontalAlign

交叉轴垂直方向：VerticalAlign

build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin({top:10,bottom:10})
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(HorizontalAlign.End)
  }

自适应伸缩.layoutWeight()

按照份数权重，分配剩余空间

build() {
    Row(){
      Text('老大')
        .backgroundColor(Color.Blue)
        .layoutWeight(1)  //占剩余空间权重
      Text('老二')
        .backgroundColor(Color.Yellow)
        .layoutWeight(2)
      Text('老三')
        .backgroundColor(Color.Red)
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }

Blank() 填充空白区域，像弹簧

Checkbox()复选框

Text(){Span(‘1’)Span(‘2’)}

弹性布局Flex

build() {
    Flex({
      direction:FlexDirection.Row,      //主轴方向
      justifyContent:FlexAlign.SpaceBetween,   //主轴方式
      alignItems:ItemAlign.Center    //交叉轴方式
    }){
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('90%')
    .backgroundColor(Color.Green)
  }

弹性布局Flex 多行

Column(){
      Flex({
        wrap:FlexWrap.Wrap    //设置多行
      }){
        Text('我是他').backgroundColor(Color.Gray).margin({right:5,bottom:5}).padding(4)
        Text('他不是我').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('我到底是谁').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('你是？').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('到底是什么').backgroundColor(Color.Gray).margin({right:5}).padding(4)
      }
    }
    .width('100%')
    .height('100%')
  }

绝对定位：控制组件位置，实现层叠效果

  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Blue)
        .border({
          width:2
        })
        //绝对定位 控制位置，层叠效果
        .position({
          x:0,
          y:0
        })
        //zindex设置层级
        .zIndex(-1)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Red)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
  }

层叠布局Stack（）{}

build() {
    //层叠方位
    Stack({alignContent:Alignment.TopEnd}){
      Text('黄药师').width(250).height(500).backgroundColor(Color.Yellow)
      Text('黄蓉').width(200).height(400).backgroundColor(Color.Red)
      Text('郭襄').width(150).height(300).backgroundColor(Color.Blue)
    }
    .width(300).height(600)
    .backgroundColor(Color.Pink)
  }

Grid()  规则的行列布局

Grid(){
      ForEach([1,2,3,4,5,6,7,8,9,10,11,12],()=>{
        GridItem(){
          Column(){

          }
          .width('100%').height('100%')
          .backgroundColor(Color.Green)
          .border({
            width: 1,
            color: '#666',
            style: BorderStyle.Solid
          })
        }
      })
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height(500)
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .columnsGap(5)
    .rowsGap(5)

badge() 角标

Badge({
            count:1,
            position:BadgePosition.RightTop,
            style:{
              fontSize:14,
              badgeSize:20,
              badgeColor:'#fa2a2d'
            }
          }){
            Column(){

            }
            .width('100%').height(200)
            .backgroundColor(Color.Green)
            .border({
              width: 1,
              color: '#666',
              style: BorderStyle.Solid
            })
          }

遮罩显隐控制：

  • 透明度：opacity：0=>1
  • 层级:zIndex:-1=>99

图片动画

  • 缩放scale： 0=>1
  • .animation({duration:500})

Swiper() 轮播

Swiper(){
        Image($r('app.media.ic_gallery_create'))
          .width(200)
          .fillColor(Color.Blue)
        Image($r('app.media.ic_gallery_create'))
          .width(200)
          .fillColor(Color.Blue)
        Image($r('app.media.ic_gallery_create'))
          .width(200)
          .fillColor(Color.Blue)
      }
      .width('100%').height(100)
      .loop(true)
      .autoPlay(true)
      .interval(4000)
      .vertical(false)
      .indicator(
        Indicator.dot()
          .itemWidth(20)
          .itemHeight(20)
          .color(Color.Black)
          .selectedColor(Color.Red)
          .selectedItemWidth(50)
          .selectedItemHeight(20)
      )

@Extend  扩展组件(样式和事件)

@Extend(组件名)

function  函数名(参数1，参数2) {}

@Styles 抽取通用属性、事件

全局：@Styles function setbg() {}  (不支持传参)

组件内: @Styles setbg() {}(不支持传参)

@Bulider 自定义构建函数（结构，样式，事件）

@Builder
function navItem(icon: ResourceStr,txt: string) {

}

Scroll

@Entry
@Component
struct Index {
  @State message: string = 'Hello World  哈哈哈hahahahah';
  myScroll:Scroller = new Scroller()
  build() {
    Column() {
      Scroll(this.myScroll){
        //只支持一个组件
        Column() {
          ForEach([1,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3], (item: number, index: number) => {
            Text('kkkkkkk')
              .width('100%')
              .height(40)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor('#666')
              .backgroundColor(Color.Pink)
              .margin(5)
          })
        }
      }
      .width('100%')
      .height(500)
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      .scrollBarColor(Color.Red)
      .scrollBarWidth(5)
      .edgeEffect(EdgeEffect.Spring)
      .backgroundColor(Color.Yellow)
      .onDidScroll(()=> {
        const y = this.myScroll.currentOffset().yOffset
        console.log('滑动距离:', `y:${y}`);
      })
      Button('控制滚动条位置')
        .width(200).height(40)
        .margin(20)
        .onClick(() => {
          this.myScroll.scrollEdge(Edge.Top)
        })
    }
  }
}

Tabs  容器组件

@Entry
@Component
struct Index {
  @State message: string = 'Hello World  哈哈哈hahahahah';
  @State selectedIndex:number = 0
  @Builder
  navItem(index:number, icon: ResourceStr, selectedIcon:ResourceStr, txt: string) {
    Column() {
      Image(index==this.selectedIndex?selectedIcon:icon)
        .width(30)
      Text(txt)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor(index==this.selectedIndex?Color.Red:Color.Black)
    }
  }

  build() {
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Text('首页')
      }
      .tabBar(this.navItem(0,$r('app.media.app_icon'),$r('app.media.app_icon'),'首页'))

      TabContent(){
        Text('我的')
      }
      .tabBar(this.navItem(1,$r('app.media.startIcon'),$r('app.media.app_icon'),'我的'))
    }
    .vertical(false)
    .scrollable(true)
    .animationDuration(0)
    // .barMode(BarMode.Scrollable)  //滚动
    .onChange((index:number) => {
      this.selectedIndex = index
    })
  }
}

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值