HarmonyOS 鸿蒙Next：父容器为Stack，子内容标题高度固定为50，另一个子容器高度撑满剩余空间，是否提供简便接口，类似前端CSS常用方法

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：父容器为Stack，子内容标题高度固定为50，另一个子容器高度撑满剩余空间，是否提供简便接口，类似前端CSS常用方法 父容器为Stack , 子内容标题高度固定为 50 ，另一个子容器高度撑满剩余空间。是否可以提供一个简便的接口，类似前端CSS 中经常使用的方法calc('100% - 50)

Harmonyos Next教程
2 回复

支持这种写法 ‘calc(100% - 50px)’ 注意空格和单位

更多关于HarmonyOS 鸿蒙Next：父容器为Stack，子内容标题高度固定为50，另一个子容器高度撑满剩余空间，是否提供简便接口，类似前端CSS常用方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，对于UI布局管理，可以使用ArkUI（eTS，即Extensible TypeScript）进行开发，其布局机制类似于前端CSS但有所差异。针对你提到的需求——父容器为Stack，其中一个子内容标题高度固定为50，另一个子容器高度撑满剩余空间——鸿蒙系统提供了相应的布局组件和属性来实现这一效果。

你可以使用Stack组件，并结合Flexible和Rigid布局来达到目的。具体实现方式如下：

  1. 使用Stack作为父容器。
  2. 第一个子容器（标题）设置固定高度50，可以使用Rigid布局并指定高度。
  3. 第二个子容器使用Flexible布局，它会自动撑满Stack中剩余的空间。

示例代码如下：

@Entry
@Component
struct Example {
  build() {
    Stack() {
      Rigid({ height: 50 }) {
        // 标题内容
        Text('标题').fontSize(16).textAlign(TextAlign.Center).margin({ top: 25 })
      }
      .width('100%')
      Flexible() {
        // 撑满剩余空间的子容器
        Scroll() {
          // 内容区域
        }
      }
    }
  }
}

此代码示例展示了如何使用Rigid和Flexible在Stack布局中分配空间。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部