鸿蒙开发-一多布局之占比布局_一多布局如何实现-CSDN博客

本文链接：https://blog.csdn.net/chuanshixx/article/details/146040954

在HarmonyOS中，ArkTS（Ark TypeScript）语法为开发者提供了一种声明式的方式来构建用户界面。对于“一多中占比布局”（这里可以理解为在多个组件中按照一定比例分配空间），通常可以使用Flex布局或Grid布局来实现。下面将分别介绍这两种布局方式在ArkTS中的实现方法。

Flex布局实现占比布局

Flex布局允许容器内的子组件在主轴（默认是水平方向）和交叉轴（默认是垂直方向）上按照一定比例或空间进行排列。

@Entry
@Component
struct FlexLayoutDemo {
  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: JustifyContent.SpaceBetween }) {
      // 第一个子组件，占据剩余空间的1/3（示例）
      FlexItem() {
        Text('Component 1')
          .fontSize(20)
          .flexGrow(1) // 设置为可增长，但具体占比需要通过其他组件的flex属性共同决定
          // 这里为了简化示例，我们假设其他两个组件flexGrow分别为2和3，则此组件占据1/(1+2+3)=1/6的空间，
          // 但由于我们使用了SpaceBetween，实际空间分配会略有不同，这里主要是为了展示flexGrow的用法。
          // 若要实现精确占比，应结合flexGrow和固定宽度/高度（如果适用）来使用，或者通过外部容器控制整体布局。
          // 注意：这里的flexGrow值仅为示例，实际占比需要通过所有flexItem的flexGrow值共同决定。
      }
      
      // 中间占比较大的组件（示例为2/3的比例，但需注意SpaceBetween的影响）
      // 由于SpaceBetween会平均分配剩余空间给子组件之间的间隔，因此这里不使用flexGrow来直接表示占比，
      // 而是可以通过设置固定宽度或使用flexGrow结合外部容器宽度来控制。
      // 但为了简化示例，我们仍使用flexGrow，并假设其他条件使得此组件占据较大空间。
      FlexItem() {
        Text('Component with Larger Space')
          .fontSize(20)
          .flexGrow(2) // 假设其他条件使得此组件占据较大空间
      }
      
      // 第三个子组件，占据剩余空间的剩余部分（或根据flexGrow分配）
      FlexItem() {
        Text('Component 3')
          .fontSize(20)
          .flexGrow(3) // 同理，占据的空间比例会更大
      }
    }
    // 注意：上述示例中的flexGrow值仅用于说明flex属性的用法，并不代表实际占比。
    // 若要实现精确占比布局，请结合flexGrow、flexShrink（如果需要的话）以及可能的固定宽度/高度来共同决定。
  }
}

注意**：上述示例中的flexGrow值仅用于说明flex属性的用法，并不代表实际的空间占比。在Flex布局中，flexGrow决定了组件如何分配多余空间，而flexShrink决定了组件如何收缩以适应容器。要实现精确的空间占比，需要结合flexGrow（和可能的flexShrink）以及容器尺寸（如果适用）来共同决定。

Grid布局实现占比布局

Grid布局允许开发者将容器划分为网格，并在网格中放置子组件。每个网格单元可以指定行和列的跨度，从而实现更复杂的布局。

@Entry
@Component
struct GridLayoutDemo {
  build() {
    Grid({ rows: '1fr 2fr', columns: '1fr 1fr' }) {
      // 第一个网格单元，占据第一行第一列，且行占比为1/3（因为有两行，且第二行占2份）
      GridItem() {
        Text('Grid Cell 1')
          .fontSize(20)
      }
      .rowStart(0)
      .rowEnd(1)
      .colStart(0)
      .colEnd(1)
      
      // 第二个网格单元，占据第一行第二列
      GridItem() {
        Text('Grid Cell 2')
          .fontSize(20)
      }
      .rowStart(0)
      .rowEnd(1)
      .colStart(1)
      .colEnd(2)
      
      // 第三个网格单元，占据第二行整行（因为行占比为2/3）
      GridItem() {
        Text('Grid Cell 3 (Larger Space)')
          .fontSize(20)
      }
      .rowStart(1)
      .rowEnd(2)
      .colStart(0)
      .colEnd(2) // 跨越两列
    }
  }
}

在Grid布局中，通过rows和columns属性定义网格的行和列，并通过GridItem的rowStart、rowEnd、colStart和colEnd属性指定每个网格单元的位置和跨度。上述示例中，第一行和第二行的占比分别为1/3和2/3（因为rows属性设置为'1fr 2fr'），而每列则占据相等的空间（因为columns属性设置为'1fr 1fr'）。