首页 > 其他分享 >【鸿蒙应用开发】常见的容器组件:ColumnSplit、RowSplit和Flex

【鸿蒙应用开发】常见的容器组件:ColumnSplit、RowSplit和Flex

时间:2024-09-14 15:54:06浏览次数:10  
标签:Flex ColumnSplit 100% height width backgroundColor 100 RowSplit Row


上一章已经了解了Column和Row的一些属性,以下是几个案例:

设置子组件水平方向的间距为:5

@Entry
@Preview
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙';
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Row({ space: 5 }) {
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("red")
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("blue")
      }
      .width("90%")
      .height('100%')
      .border({ width: 1 })

    }
    .height('100%')
    .width('100%')
  }
}

效果如图所示:

【鸿蒙应用开发】常见的容器组件:ColumnSplit、RowSplit和Flex_分隔线

设置子元素垂直方向上的对齐方式:

@Entry
@Preview
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙';
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Row({ space: 5 }) {
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("red")
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("blue")
      }
      .width("90%")
      .height('100%')
      .border({ width: 1 })
      .alignItems(VerticalAlign.Center)
    }
    .height('100%')
    .width('100%')
  }
}

效果如图所示:

【鸿蒙应用开发】常见的容器组件:ColumnSplit、RowSplit和Flex_鸿蒙_02


其他的对齐方式,选择对应的属性即可。

ColumnSplit和RowSplit

ColumnSplit和RowSplit是在每一个子组件之间插入一条分隔线,ColumnSplit是横向分隔线,RowSplit是纵向的分隔线。

RowSplit使用方法如下:

@Entry
@Preview
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙';
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      RowSplit(){
        Text("1")
          .width(100)
          .height(30)
          .backgroundColor(0xF5DEB3)
        Text("1")
          .width(100)
          .height(30)
          .backgroundColor(0xF5DEB3)
        Text("1")
          .width(100)
          .height(30)
          .backgroundColor(0xF5DEB3)
      }
      .resizeable(true) // 是否可拖动
      .width("90%").height(400)
    }
    .height('100%')
    .width('100%')
  }
}

效果如图:

【鸿蒙应用开发】常见的容器组件:ColumnSplit、RowSplit和Flex_鸿蒙_03


ColumnSplit的用法也是类似的。

Flex

Flex组件是以弹性方式布局子元素,标准的Flex布局容器包含以下参数:

  • direction:子组件在 flex 容器上排列的方向,也就是主轴方向。
  • wrap:Flex 容器以单行/列 还是多行/列排列。
  • justifyContent:子组件在 Flex 容器主轴上的对齐格式
  • alignItems:子组件在 Flex 容器交叉轴的对齐方式
  • alignContent:交叉轴上有额外空间的时候,多行内容的对齐方式,只有在 wrap 为Wrap或WrapReverse时生效。

比如:

Flex({direction:FlexDirection.Row}){
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
      }

效果如图:

【鸿蒙应用开发】常见的容器组件:ColumnSplit、RowSplit和Flex_Text_04

今天先总结ColumnSplit、RowSplit和Flex三个组件


标签:Flex,ColumnSplit,100%,height,width,backgroundColor,100,RowSplit,Row
From: https://blog.51cto.com/u_12344418/12017514

相关文章

  • FlexibleBI智能SPC系统:提升效率,优化质量控制的利器
    在现代工业中,质量控制是决定产品合格率和企业竞争力的关键环节。为了应对生产流程中的复杂数据管理需求,我们推出了一款集成全面功能的智能SPC(统计过程控制)系统,旨在帮助企业高效地管理、分析和优化生产质量。以下是这款SPC系统的核心特点及优势。FlexibleBI一键生成全面SPC分......
  • FlexibleBI高效精确的SPC数据分析系统,实时监控与智能报告生成
    在制造领域中,稳定的生产过程控制和质量分析是企业保持竞争力的核心。而我们推出的SPC(统计过程控制)系统,正是为满足现代生产需求而设计,提供了一系列灵活、智能的功能,帮助企业实现高效精准的数据分析与质量控制。FlexibleBI一键生成全面SPC分析报告通过我们的系统,只需轻松一键......
  • flex css - 在一定高度后剪辑元素而不是换行
    布局是一种用于创建灵活和响应式布局的CSS技术。它提供了一种更简单和直观的方式来排列和对齐页面元素。通过使用Flex布局,可以轻松实现水平和垂直方向上的对齐、分布和自适应调整。它还支持灵活的容器和项目的大小调整,以及对元素顺序的控制。掌握Flex布局的基础知识对于构建......
  • 828华为云征文 | 云服务器Flexus X实例,镜像切换与服务器压力测试
    828华为云征文|云服务器FlexusX实例,镜像切换与服务器压力测试云服务器FlexusX压力测试1、购买华为云FlexusX实例Flexus云服务器X实例-华为云(huaweicloud.com)2、xshell远程连接服务器3、安装压力测试工具sysbench使用sysbench进行CPU、内存、I/O压力......
  • 弹性布局flex
    我们在做web页面,由其是后台的页面的时候,需要菜单栏和右侧内容区域分隔开来,例如如下的功能: 就需要使用flex弹性内容的布局。当我们为父盒子设置为flex后,子元素的float,clear和vertical-align属性将失效在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴默......
  • 828华为云征文 | 华为云 Flexus X 实例 :与腾讯云性能算力大比拼
    828华为云征文|华为云FlexusX实例:与腾讯云性能算力大比拼在当今云计算市场中,华为云和腾讯云都是备受瞩目的云服务提供商。本文将重点对比华为云FlexusX实例与腾讯云在性能算力方面的表现,帮助用户更好地了解两者的优势与差异。一、引言随着数字化时代的加速发展,......
  • 828华为云征文|华为云Flexus X搭建借贷管理系统、二次开发借贷小程序 前端源码uniapp
    在华为云828B2B企业节的盛宴中,FlexusX实例以其卓越的算力性能和灵活的资源配置脱颖而出。对于追求极致性能、渴望在借贷管理、电商交易等场景中脱颖而出的您来说,FlexusX无疑是最佳拍档。搭载创新加速引擎,让您的自建MySQL、Redis、Nginx如虎添翼,轻松应对高并发挑战,确保业......
  • 828华为云征文|华为云Flexus X实例全面杜绝DDoS、XSS、CSRF与SQL注入攻击,为企业部署无
    华为云近期盛大开启的828B2B企业节,为追求极致算力性能的企业用户带来了前所未有的优惠盛宴。特别是FlexusX实例,其强大的计算能力在此活动期间以超值价格呈现,无疑是自建高性能MySQL数据库、Redis缓存系统以及Nginx服务器等关键服务的理想选择。对于渴望提升业务处理效率与......
  • FlexibleBI智能制造的未来:通过自主可控的国产化三坐标CMM尺寸公差质量管理系统推动工
    在全球制造业的快速发展中,精准的尺寸测量与控制成为了确保产品质量和生产效率的关键因素。传统的尺寸测量和数据分析工具,例如Excel等手动方式,已无法满足现代工业对实时性、精准性和自动化的高要求。我们的智能制造解决方案通过人工智能赋能的预测分析,为企业提供了一个强大且......
  • FlexibleBI基于人工智能的工业软件,赋能制造业的智能化与高效生产
    在当今制造业,智能化和高效生产已成为企业保持竞争力的关键要素。我们的系统通过人工智能赋能,提供预测和质量控制功能,为企业提供强大的尺寸质量管理工具。这一系统专为尺寸公差管理、3D尺寸分析、质量控制及公差分析而设计,能够满足汽车制造业的高精度需求。FlexibleBI自主可控......