鸿蒙系列--组件介绍之容器组件

2023-12-19 21:32:12

Column容器：

????????整个页面沿垂直方向布局

Row容器：

????????整个页面沿水平方向布局

布局容器的基础知识：

? ? ? ? 默认存在两根轴，主轴和交叉轴，是相互垂直的

????????Column容器是垂直方向布局，主轴的方向是垂直方向，交叉轴则是水平方向

????????Row容器是水平方向布局，主轴的方向是水平方向，交叉轴则是垂直方向

参数：

? ? ? ? space:子组件在主轴方向上的间距 可选

         Row({ space: 20 }) {
          Text('短信验证码登录')
          Text('忘记密码？')
        }

容器组件的属性：

  • justifyContent：

????????设置子组件在主轴方向上的对齐格式。参数类型：FlexAlingn

          Row({space:50}) {
            this.imageButton($r('app.media.app_icon'))
            this.imageButton($r('app.media.app_icon'))
            this.imageButton($r('app.media.app_icon'))
          }
          .justifyContent(FlexAlign.SpaceEvenly)
          .width('100%')

  • alignltems

????????设置子组件在交叉轴方向上的对齐格式

????????Column容器中的参数类型HorizontalAlign (水平对齐)

????????Row容器中的参数类型VerticalAlign (垂直对齐)

文章来源:https://blog.csdn.net/weixin_42277946/article/details/135089418
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。