鸿蒙开发-UI-布局-线性布局

这篇具有很好参考价值的文章主要介绍了鸿蒙开发-UI-布局-线性布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

鸿蒙开发-序言

鸿蒙开发-工具

鸿蒙开发-初体验

鸿蒙开发-运行机制

鸿蒙开发-运行机制-Stage模型

鸿蒙开发-UI

鸿蒙开发-UI-组件

鸿蒙开发-UI-组件-状态管理

鸿蒙开发-UI-应用-状态管理

鸿蒙开发-UI-渲染控制

鸿蒙开发-UI-布局

文章目录

前言

一、基本概念

二、布局子元素

1.子元素排列方向上的间距

Column容器内排列方向上的间距

Row容器内排列方向上的间距

2.子元素交叉轴上的对齐方式

Column容器内子元素在水平方向上的排列

 Row容器内子元素在垂直方向上的排列

3.子元素主轴上的排列方式

Column容器内子元素在垂直方向上的排列

Row容器内子元素在水平方向上的排列

三、自适应

1.自适应拉伸

2.自适应缩放

3.自适应延伸

总结


前言

上文学习了鸿蒙开发UI布局相关的知识,简单介绍了布局的分类。本文详细学习其中一种常见布局方式-线性布局。

一、基本概念

开发中最常用的布局,通过线性容器Row和Column构建,其子元素在线性方向上(Row:水平方向和Column:垂直方向)依次排列。

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

二、布局子元素

1.子元素排列方向上的间距

布局容器内,可以通过space属性设置排列方向上子元素的间距,使各子元素在排列方向上有等间距效果

Column容器内排列方向上的间距

Column({ space: 20 }) {
  Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  Row().width('90%').height(50).backgroundColor(0xD2B48C)
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

Row容器内排列方向上的间距

Row({ space: 35 }) {
  Text('space: 35').fontSize(15).fontColor(Color.Gray)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  Row().width('10%').height(150).backgroundColor(0xD2B48C)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

2.子元素交叉轴上的对齐方式

布局容器内,可以通过alignItems属性设置子元素在交叉轴(排列方向的垂直方向)上的对齐方式,且在各类尺寸屏幕中,表现一致。其中,交叉轴为垂直方向时使用VerticalAlign,交叉轴为水平方向使用HorizontalAlign。

alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式,其优先级高于alignItems属性,如果设置了alignSelf属性,则在单个子元素上会覆盖alignItems属性。

Column容器内子元素在水平方向上的排列

HorizontalAlign.Start:子元素在水平方向左对齐

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

HorizontalAlign.Center:子元素在水平方向居中对齐

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

HorizontalAlign.End:子元素在水平方向右对齐

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.End).backgroundColor('rgb(242,242,242)')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

 Row容器内子元素在垂直方向上的排列

VerticalAlign.Top:子元素在垂直方向顶部对齐

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

VerticalAlign.Center:子元素在垂直方向居中对齐

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Center).backgroundColor('rgb(242,242,242)')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

VerticalAlign.Bottom:子元素在垂直方向底部对齐

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

3.子元素主轴上的排列方式

布局容器内,可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布,也可以从主轴结束位置开始排布,或者均匀分割主轴的空间

Column容器内子元素在垂直方向上的排列

justifyContent(FlexAlign.Start):元素在垂直方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.Center):元素在垂直方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.End):元素在垂直方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.Spacebetween):垂直方向均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.SpaceAround):垂直方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.SpaceEvenly):垂直方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

Row容器内子元素在水平方向上的排列

justifyContent(FlexAlign.Start):元素在水平方向方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.Center):元素在水平方向方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.End):元素在水平方向方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.Spacebetween):水平方向方向均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.SpaceAround):水平方向方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

justifyContent(FlexAlign.SpaceEvenly):水平方向方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

Row() {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

三、自适应

1.自适应拉伸

在线性布局下,空白填充组件Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果。Row和Column作为容器,只需要添加宽高为百分比,当屏幕宽高发生变化时,会产生自适应效果

2.自适应缩放

自适应缩放是指子组件随容器尺寸的变化而按照预设的比例自动调整尺寸,适应各种不同大小的设备。在线性布局中,可以使用以下两种方法实现自适应缩放

2.1 父容器尺寸确定时,使用layoutWeight属性设置子组件和兄弟元素在主轴上的权重,忽略元素本身尺寸设置,使它们在任意尺寸的设备下自适应占满剩余空间

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

    }
  }
}

横屏效果

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

竖屏效果

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

2.2 父容器尺寸确定时,使用百分比设置子组件和兄弟元素的宽度,使他们在任意尺寸的设备下保持固定的自适应占比

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

横屏效果

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

竖屏效果

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

3.自适应延伸

自适应延伸是指在不同尺寸设备下,当页面的内容超出屏幕大小而无法完全显示时,可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式

3.1 ​​​​​​​ 在List中添加滚动条,当List子项过多一屏放不下时,可以将每一项子元素放置在不同的组件中,通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态,edgeEffect属性设置拖动到内容最末端的回弹效果

3.2 使用Scroll组件:在线性布局中,当一屏无法完全显示时,可以在Column或Row组件的外层包裹一个可滚动的容器组件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) // 滚动到边沿后回弹
  }
}

Column容器中通过ForEach创建多个Text组件,当一个屏幕显示不下,在Column组件外包装一个Scroll组件,实现Column组件内子元素滑动效果

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为

鸿蒙开发-UI-布局-线性布局,鸿蒙开发,harmonyos,ui,华为


总结

本文详细学习其中一种常见布局方式-线性布局,学习了线性容器内子元素在主轴以及交叉轴上的排列方式,同时也学习了子元素自适应相关的知识点,后面继续学习层叠布局。文章来源地址https://www.toymoban.com/news/detail-800516.html

到了这里,关于鸿蒙开发-UI-布局-线性布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UI开发布局-HarmonyOS应用UI开发布局

    UI页面的构建不用再像Android开发过程中在.xml文件中书写,可直接在页面上使用声明式UI的方式按照布局进行排列,构建应用的页面。 如下代码使用Row、Column构建一个页面布局,在页面布局中添加组件Text、Button,共同构成页面: 在实际开发的过程中,按照如下流程进行页面的

    2024年04月13日
    浏览(63)
  • 鸿蒙开发-UI-布局-栅格布局

    鸿蒙开发-UI-布局 鸿蒙开发-UI-布局-线性布局 鸿蒙开发-UI-布局-层叠布局 鸿蒙开发-UI-布局-弹性布局 鸿蒙开发-UI-布局-相对布局 文章目录 前言 一、基本概念 二、格栅容器组件 1.栅格系统断点 2.布局的总列数 3.排列方向 4.子组件间距 三、格栅容器子组件 1.span 2.offset 3.order 四、

    2024年02月20日
    浏览(38)
  • 鸿蒙开发-HarmonyOS UI架构

    当我们新建一个工程之后,首先会进入Index页。我们先简单的做一个文章列表的显示 这样,我们只要把 articles 里面填充数据,就能正常显示一个列表了。 可以看到上面的代码里是没有数据的,只有一个空数组。我们想要从网络获取数据。那么,数据怎么来呢?最简单粗暴的

    2024年02月19日
    浏览(48)
  • 鸿蒙开发-UI-布局

    鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 鸿蒙开发-UI-组件-状态管理 鸿蒙开发-UI-应用-状态管理 鸿蒙开发-UI-渲染控制 文章目录 前言 一、布局概述 1.布局结构 2.布局元素组成 3.布局分类 4.布

    2024年01月16日
    浏览(38)
  • 【学习笔记】鸿蒙UI开发-布局(ArkTs)

    GitHub:LearnHos 码云:LearnHos 拉伸能力 定义 当父容器的尺寸发生变化时,增加或减少的空间 全部分配 给父容器内的 指定子组件 场景1:自动填充 实现:容器组件-Row + 基础组件Blank 场景2:按指定的比例拉伸或收缩 拉伸 当父容器在主轴方向上的尺寸 大于 所有子组件的尺寸之

    2024年02月05日
    浏览(42)
  • 鸿蒙开发笔记(十四): UI开发概述及布局概述

    方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。 针对不同的应用场景及技术背景,方舟开发框架提供了两种开发

    2024年01月19日
    浏览(41)
  • HarmonyOS鸿蒙基于Java开发: Java UI 动画开发指导

    目录 帧动画 数值动画 属性动画 动画集合 多个动画同时开始 多个动画按顺序逐个执行 多个动画顺序执行和同时执行并存 动画是组件的基础特性之一,精心设计的动画使UI变化更直观,有助于改进应用程序的外观并改善用户体验。

    2024年02月21日
    浏览(47)
  • HarmonyOS鸿蒙基于Java开发: Java UI 多模输入开发

    目录 约束与限制 场景介绍 接口说明 开发步骤 HarmonyOS旨在为开发者提供NUI(Natural User Interface)的交互方式。有别于传统操作系统的输入划分方式,在HarmonyOS上,我们将多种维度的输入整合在一起,开发者可以借助应用程序框架、系统自带的UI组件或API接口轻松地实现具有多

    2024年01月20日
    浏览(48)
  • HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer)

    官方文档 其实很好理解 :alignRules{}里面表示: 元素四个方向(left,top,bottom,right), 相对于谁(anchor:‘id’) 的什么位置(HorizontalAlign.Start ,VerticalAlign.Bottom ,VerticalAlign.Bottom, HorizontalAlign.End ) RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位

    2024年02月02日
    浏览(47)
  • HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol)

    HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer) 官方文档:栅格布局(GridRow/GridCol) 通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向 代码 描述 GridRowDirection.Row 从左往右排列 GridRowDirection.RowReverse 从右往左排列 左往右排列 子组件从右

    2024年02月03日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包