Harmony学习（二）------ArkUI

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)
  }

原文地址：https://blog.csdn.net/xiao2218897/article/details/140579539

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！