Android视角看鸿蒙第十课-鸿蒙的布局之线性布局

最新推荐文章于 2024-05-23 18:59:29 发布

走在路上的菜鸟

最新推荐文章于 2024-05-23 18:59:29 发布

阅读量863

点赞数 15

分类专栏： Android视角看鸿蒙文章标签： android harmonyos 华为

本文链接：https://blog.csdn.net/weixin_44656996/article/details/137101764

版权

Android视角看鸿蒙专栏收录该内容

12 篇文章 2 订阅

订阅专栏

Android视角看鸿蒙第十课-鸿蒙的布局之线性布局

导读

这篇文章开始，依次学习鸿蒙的八大布局，这是第一篇，所以顺带也会聊聊通用属性。

文档地址

如何定义一个线性布局

Android中是使用LinearLayout来构建线性布局的，通过**orientation的取值(vertical或horizontal)**来控制排列方向
鸿蒙线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列
在这里插入图片描述

如何设置组件的宽度和高度

在这里插入图片描述
在page默认生成的代码中可以看到是由width()和height()来控制的。
默认中使用的都是100%，是通过比例来控制的，
那么width和height只能使用百分比来控制的吗？显然不是。

点击方法查看，描述太少了。
在这里插入图片描述

我找了找文档，首先找到了这个
在这里插入图片描述
这个描述证明了，不仅仅可以使用百分比来控制宽高，还可以使用固定数字。

那么这个纯数字的单位是什么呢？
我之前的文章

之前在了解designWidth时，顺带了解了鸿蒙中的单位
在这里插入图片描述
默认使用的是vp等同于dp，
fp是文字大小单位等同于sp，
lpx我们在之前的文章中研究过，需要和designWidth配合使用,类似于autosize，
px就是屏幕像素。

所以以上的都可以的。
给大家看看使用案例
在这里插入图片描述
designWidth配置的100，实际使用就是设计图的宽度。

通过官方文档发现，还可以通过==size()==函数设置宽高，看到的时候要知道。

对齐方式

在这里插入图片描述
在当前看来，若不指定宽高默认均为wrap，且子空间默认都是中心对齐的。
那么如何修改对其方式，类似于LinearLayout的gravity

看文档
在这里插入图片描述
这个描述的很清楚，有alignItems和alignSelf两个
alignItems类似LinearLayout的Gravity属性，控制子控件的排列方式
alignSelf类似于LinearLayout中的子控件的layout_gravity属性，控制当前子控件在Linear Layout中的排列方式，优先级高于alignItems。

alignItems

alignItems类似LinearLayout的Gravity属性，控制子控件的排列方式
在这里插入图片描述

看看代码使用

alignSelf

alignSelf类似于LinearLayout中的子控件的layout_gravity属性，控制当前子控件在Linear Layout中的排列方式，优先级高于alignItems。

文档没有像alignItems一样给出图片示例，理论上是一样的。
直接上代码
在这里插入图片描述
alignSelf的取值只有ItemAlign一种，不需要根据父布局的不同而变化。

线性布局设置Item间距

这个Android上是没有的，只能每个item自己设置
看看文档
在这里插入图片描述

设置方式一致，相当简单。我想起来在RecyclerView中设置分割线时，最后的item往往不需要还需要单独处理。

justifyContent布局子元素在主轴上的排列方式

官方文档
喜欢看最权威的同学，可以点这个链接。
先上个效果图
在这里插入图片描述
前面三个我们在Android中使用的也比较多，
后面也是属于创新功能，主要是平分规则不一致。
这个字段共有6个取值:
FlexAlign.Star元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
FlexAlign.Center元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
FlexAlign.End元素在垂直方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
FlexAlign.Spacebetween
垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
FlexAlign.SpaceAround
垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
FlexAlign.SpaceEvenly
垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

最后上个代码
在这里插入图片描述

Blank自适应拉伸

依然新东西，看看文档
在这里插入图片描述
感觉略微多于一点，在Android中我一般直接给TextView设置权重weight，或者中间写一个View设置权重。
看个人习惯了。

layoutWeight

在这里插入图片描述
使用和Android一致，但是鸿蒙只支持String或number,而Android是float
android中设置权重时，width是0还是其他是有去别的，鸿蒙设置权重时直接忽略宽度
虽然可以设置为String，但是不建议。实测‘a’不行‘1’可以,，意义不大，只是单纯的输入类型兼容
在这里插入图片描述

滑动Scroll

在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。
垂直方向布局中使用Scroll组件：

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }, item => item)
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

官方代码,请参考。

如何控制显示与隐藏

在这里插入图片描述

// xxx.ets
@Entry
@Component
struct VisibilityExample {
  build() {
    Column() {
      Column() {
        // 隐藏不参与占位
        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 隐藏参与占位
        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 正常显示，组件默认的显示模式
        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
      }.width('90%').border({ width: 1 })
    }.width('100%').margin({ top: 5 })
  }
}

Android有的也都有。None=Gone,Hidden=InVisible,Visible还是Visible。

pading和margin

在这里插入图片描述
使用案例

padding({ top: 5, left: 10, bottom: 15, right: 20 })
四边不一致时的设置方式。

constraintSize 最大最小尺寸

等同于Android的maxWidth,maxHeight，这里聚合了
在这里插入图片描述
使用案例:

Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text')
        .width('90%')
        .constraintSize({ maxWidth: 200 })

结束

上面所述，就是我们常用的字段了。最后附上官方的通用属性文档，有其他需要的同学请自行查阅。
通用属性

走在路上的菜鸟

关注

15
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
Android视角看鸿蒙第十课-鸿蒙的布局之线性布局

Android中是使用LinearLayout来构建线性布局的，通过**orientation的取值(vertical或horizontal)**来控制排列方向鸿蒙线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。
复制链接

扫一扫