Harmony OS开发-ArkUI框架速成八之交叉轴和自适应

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴!君志所向,一往无前!


1.线性布局-交叉轴对齐

交叉轴对其,以 Row 为例,主轴在水平方向,交叉轴在垂直方向 属性:alignItems() 参数:枚举类型VerticalAlign 注意:布局容器在交叉轴要有足够空间,否则无法生效

@Entry
@Component
struct Index{
  build() {
    Column(){
      Row() {
        Text('可以关注我')
          .height(40).fontSize(20).margin({right:5})
          .backgroundColor(Color.Pink)
        Text('可以评论哈')
          .height(40).fontSize(20).margin({right:5})
          .backgroundColor(Color.Orange)
        Text('可以点赞收藏')
          .height(40).fontSize(20)
          .backgroundColor(Color.Brown)
      }
      .width('100%')
      .height(80)
      .backgroundColor(Color.Gray)
      // 顶部对齐
      .alignItems(VerticalAlign.Top)
      .margin({bottom:10})
      Row() {
        Text('可以关注我')
          .height(40).fontSize(20).margin({right:5})
          .backgroundColor(Color.Pink)
        Text('可以评论哈')
          .height(40).fontSize(20).margin({right:5})
          .backgroundColor(Color.Orange)
        Text('可以点赞收藏')
          .height(40).fontSize(20)
          .backgroundColor(Color.Brown)
      }
      .width('100%')
      .height(80)
      .backgroundColor(Color.Gray)
      // 底部对齐
      .alignItems(VerticalAlign.Bottom)
      .margin({bottom:10})
    }.width("100%")

  }
}

2.自适应缩放

父容器尺寸确定时,设置了 layoutWeight 属性的子元素与兄弟元素占主轴尺寸按照权重进行分配。

属性:layoutWeight()

参数:数字

    // 主轴方向:水平方向
      Row() {
        Text('左侧')
          .width(60)
          .height(30)
          .backgroundColor('#ccc')
        Text('中间')
          .height(30)
          .backgroundColor(Color.Pink)
          .layoutWeight(1)
        Text('右侧 layoutWeight')
          .height(30)
          .backgroundColor('#fc0')
          .layoutWeight(1)
      }.margin({bottom:10})

3.综合实践-用户关注

Row() {
        Image($r('app.media.startIcon'))
          .width(30)
          .margin({right: 5})
          .borderRadius(15)
        Text('程序员Feri')
          .fontSize(15)
          .fontWeight(700)
          .layoutWeight(1)
        Text('关注')
          .width(50)
          .height(25)
          .border({width: 1, color: '#999'})
          .borderRadius(3)
          .fontSize(12)
          .textAlign(TextAlign.Center)
          .fontColor('#999')
      }
      .width('96%')
      .height(50)
      .padding(10)
      .margin({top: 20})
      .borderRadius(5)
      .borderWidth(1).borderColor("#999")

4 综合实战-头条新闻

 Column() {
        Row({space: 10}) {
          // 左侧
          Column() {
            Text('省电子院成功加入全国数标委WG2数据治理标准工作组')
              .fontSize(14)
              .fontColor('#444')
            Row() {
              Text('九派快讯 昨天04:28')
                .fontSize(12)
                .fontColor('#999')
                .layoutWeight(1)
              Image($r("app.media.gb"))
                .width(14)
                .fillColor('#999')
            }
            .width('100%')
            // .justifyContent(FlexAlign.SpaceBetween)
          }
          .height('100%')
          .layoutWeight(1)
          // 水平左对齐 -- 交叉轴
          .alignItems(HorizontalAlign.Start)
          // 垂直两端对齐 -- 主轴
          .justifyContent(FlexAlign.SpaceBetween)
          // 右侧
          Image($r('app.media.xw'))
            .width(100)
        }
        .width('100%')
        .height(80)
        .padding(5)
        .margin({top: 20})

好啦,线性布局,你会了吗?每天坚持学习一个知识点!加油,关注我,轻松拿捏Harmony OS开发!

相关推荐
匹马夕阳4 小时前
Vite+vue3项目中unplugin-auto-import的作用和使用方法详解
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员5 小时前
Vue 3 + Vite + JS 项目中实现组件全局自动化注册的魔法,极致组件自动化注册方案,开发效率飙升300%。
javascript·vue.js·自动化
独孤求败Ace6 小时前
第40天:Web开发-JS应用&VueJS框架&Vite构建&启动打包&渲染XSS&源码泄露&代码审计
前端·javascript·vue.js
阿珊和她的猫9 小时前
Vue 和 React 的生态系统有哪些主要区别
前端·vue.js·react.js
m0_7482487713 小时前
Docker Compose一键部署Spring Boot + Vue项目
vue.js·spring boot·docker
码视野13 小时前
基于 SpringBoot 和 Vue 的智能腰带健康监测数据可视化平台开发(文末联系,整套资料提供)
vue.js·spring boot·信息可视化
一只小阿乐13 小时前
Https握手过程 (面试题)
vue.js·前端开发·https简介
bin915314 小时前
DeepSeek 助力 Vue 开发:打造丝滑的步骤条
前端·javascript·vue.js
Goodbaibaibai15 小时前
vue基础(四)
前端·javascript·vue.js
敲敲敲敲暴你脑袋17 小时前
vue3中ref响应式变量为什么script中要用.value,而template模板中不需?
javascript·vue.js·visual studio code