HarmonyOS 鸿蒙Next 给现有控件方便地包一层纯背景色的方法

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

HarmonyOS 鸿蒙Next 给现有控件方便地包一层纯背景色的方法

Row() {
  Text(text)
    .fontSize('12fp')
    .fontColor(Color.White)
    .fontFamily(CommonConstants.SI_YUAN)
  if (isLiving) {
    Swiper() {
      LazyForEach(
        this.liveAnimateSource,
        (newsItem: Resource, index: number) => {
          Image(newsItem)
            .width('100')
            .height('100')
        },
        (item: string) => item)
    }
    .autoPlay(true)
    .indicator(false)
    .loop(true)
    .duration(0)
    .interval(10)
    .width('12fp')
    .height('12fp')
    .margin({ left: 4 })
    .disableSwipe(false)
  }
}
.height(28)
.backgroundColor(ColorUtils.colorWithOpacity(0.3, ColorUtils.color000000))
.borderRadius(14)
.position({ x: 0, y: CommonConstants.TAB_HEIGHT + this.statusBarHeight })
.margin({ left: 16 })
.padding({ left: 8, right: 8 })

创建一个标签，想在底部加一层比row边多出 3vp 的"#33000000"的纯色背景
不要给row添加border，因为要 新加纯色背景 给0.2白的row上点黑色底色
一直没找到怎么给现有控件方便地包一层纯背景色的方法


更多关于HarmonyOS 鸿蒙Next 给现有控件方便地包一层纯背景色的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

将组件再包裹一层容器组件（例如row，stack等）设置底色，可以通过@Builder方式封装所需样式

更多关于HarmonyOS 鸿蒙Next 给现有控件方便地包一层纯背景色的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，为现有控件方便地包一层纯背景色，可以通过自定义布局或利用现有的布局容器来实现。以下是具体方法：

  1. 使用Dependency组件和ShapeElement：

    在控件的XML布局文件中，可以通过设置Dependency组件的background属性来应用纯色背景。例如，使用ShapeElement定义背景颜色：

    <DirectionalLayout
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">
    <Dependency
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:background_element="$+resource:color/your_color">
        <!-- 放置你的控件 -->
        <Text
            ohos:id="$+id:your_text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="Hello, HarmonyOS!"/>
    </Dependency>
</DirectionalLayout>

    其中，your_color是在resources/base/color目录下定义的颜色资源。

  2. 使用ComponentContainer：

    另一个方法是使用ComponentContainer作为包裹层，并设置其背景颜色。这种方法类似于上述的Dependency组件使用，但ComponentContainer提供了更灵活的布局控制。

    <DirectionalLayout
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">
    <ComponentContainer
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:background_element="$+resource:color/your_color">
        <!-- 放置你的控件 -->
        <Text
            ohos:id="$+id:your_text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="Hello, HarmonyOS!"/>
    </ComponentContainer>
</DirectionalLayout>

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

回到顶部