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就是让四周都空出一些位置如:

相关推荐
天生我材必有用_吴用8 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
悬空八只脚33 分钟前
React-Native开发鸿蒙NEXT-svg绘制睡眠质量图part3
harmonyos
嘿嘿-g1 小时前
华为IP(5)
网络·华为
亿先生@16 小时前
极限挑战之一天学会 Photoshop(更新中)
ui·photoshop
坚果的博客17 小时前
坚果派已适配的鸿蒙版flutter库【持续更新】
flutter·华为·开源·harmonyos
NapleC18 小时前
HarmonyOS:Navigation实现导航之页面设置和路由操作
华为·harmonyos·navigation
HMSCore18 小时前
HarmonyOS SDK助力鸿蒙版今日水印相机,真实地址防护再升级
harmonyos
二狗哈20 小时前
制作一款打飞机游戏23:编辑器ui
ui·编辑器·excel
遇见火星20 小时前
华为VRP系统简介&配置TELNET远程登录!
华为·路由器·交换机·telnet·vrp