HarmonyOS 鸿蒙Next一行中有三个组件,一个宽度固定,剩下两个组件如何各占父组件的剩余的百分之五十

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

HarmonyOS 鸿蒙Next一行中有三个组件,一个宽度固定,剩下两个组件如何各占父组件的剩余的百分之五十

一行中有三个组件,一个宽度固定,剩下两个组件如何各占父组件的剩余的百分之五十

3 回复
// xxx.ets

import { webview } from '@kit.ArkWeb';

import { BusinessError } from '@kit.BasicServicesKit';

import { router } from '@kit.ArkUI';

@Entry

@Component

struct WebComponent {

  build() {

    Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}){

      Text('根之茂者其实遂,膏之沃者其光晔。”这是植根于中华优秀传统文化的大国胸襟')

        .wordBreak(WordBreak.NORMAL)

        .ellipsisMode(EllipsisMode.CENTER)

        .textOverflow({overflow: TextOverflow.Ellipsis})

        .width(120)

      Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}){

        Text('根之根之茂者其实遂')

          .backgroundColor(Color.Brown)

          .wordBreak(WordBreak.NORMAL)

          .ellipsisMode(EllipsisMode.CENTER)

          .textOverflow({overflow: TextOverflow.Ellipsis})

          .maxLines(1)

          .width('50%')

          .height(50)

        Text('根之茂者其实遂,膏之沃者其光晔')

          .backgroundColor(Color.Green)

          .wordBreak(WordBreak.NORMAL)

          .ellipsisMode(EllipsisMode.CENTER)

          .textOverflow({overflow: TextOverflow.Ellipsis})

          .height(50)

          .maxLines(1)

          .width('50%')

      }

      .height(80)

      .backgroundColor(Color.Red)

    }

    .height(200)

    .backgroundColor(Color.Gray)

  }

}

更多关于HarmonyOS 鸿蒙Next一行中有三个组件,一个宽度固定,剩下两个组件如何各占父组件的剩余的百分之五十的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Row() {
Text("1231").width('50vp')
Row()
.layoutWeight(1)
.height('1vp')
.backgroundColor(Color.Blue)
Row()
.layoutWeight(1)
.height('1vp')
.backgroundColor(Color.Red)
}.width('100%')

在HarmonyOS鸿蒙Next中,若要实现一行中有三个组件,其中一个宽度固定,剩下两个组件各占父组件剩余宽度的百分之五十,可以采用Flex布局。具体实现方式如下:

  1. 使用Flex容器包裹这三个组件。
  2. 为固定宽度的组件设置具体的宽度值。
  3. 为剩余两个组件设置flex-grow属性为1,并确保它们的宽度之和为剩余空间的百分之五十(这通常通过flex布局的默认行为实现,即剩余空间按flex-grow比例分配)。同时,可以设置flex-basis为0,以确保它们仅根据flex-grow属性分配空间。
  4. 确保Flex容器的宽度为100%,以便子组件能够根据父容器的宽度进行动态调整。

在实际开发中,可能还需要考虑组件的margin和padding等属性对最终布局的影响。如果设置了这些属性,可能需要适当调整组件的宽度或flex属性,以确保布局的正确性。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部