ArkUI部分案例笔记——padding,space

基础的构建

组件分类:

容器组件:像Column,Row这种组件就是容器组件一般就来控制行和列的就是容器组件

基础组件:Text(文本组件),像这种用来有一定功能的就是基础组件

注意:一个build只能有一个根容器组件

我们直接通过这个来做一个小说标签类似于这种。

代码:

build() {
    Column(){
      Text("小说标签").fontSize(25).fontWeight(700).width("100%").height(35)
      Row(){
        Text("都市").backgroundColor(Color.Pink).width(40)
        Text("悬疑").backgroundColor(Color.Orange).width(40)
        Text("推理").backgroundColor(Color.Grey).width(40)
        Text("情感").backgroundColor(Color.Green).width(40)
      }.width("100%")
    }.width("100%")
  }
}

注意Text默认是向中对齐的,就比如这个没加width的话他就会在中间展示而且他的大小就只有红方框这么大。按需分配大小。

但是当我们加上width("100%")表示占满整行,所以会向左对齐

案例2:文字溢出

对于像这种百度科普中的省略号,可以用(textOverflow)文字溢出来做

效果:

代码:

Column(){
      Image($r("app.media.yuan1")).width("100%")
      Text("《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏,于2017年1月底立项,原初测试于2019年6月21日开启,再临测试于2020年3月19日开启,启程测试于2020年6月11日开启,PC版技术性开放测试于9月15日开启,公测于2020年9月28日开启。在.")
        .textOverflow({
          overflow:TextOverflow.Ellipsis
        }).maxLines(3).lineHeight(24)
    }

案例3:登陆界面

代码:

build() {
    Column({space:15}){
      Image($r("app.media.naxida")).width(100)
      TextInput({placeholder:"请输入账号"})
      TextInput({placeholder:"请输入密码nya~"})
      Button("登录").width(200)
      Row({space:10}){
        Text("注册账号")
        Text("忘记密码")
      }




    }.width("100%").padding(20)
  }

space功能就是让中间有些间隙:

padding就是让四周都空出一些位置如:

相关推荐
Random_index1 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
芋芋qwq4 小时前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
鸿蒙自习室5 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu77 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩7 小时前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
大霞上仙7 小时前
element ui table 每行不同状态
vue.js·ui·elementui
岳不谢9 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr05759 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
栈老师不回家15 小时前
Element UI 组件库详解【Vue】
前端·vue.js·ui
诗歌难吟46416 小时前
初识ArkUI
harmonyos