HarmonyOS鸿蒙Next中如何设置HdsVisualComponent圆角大小

HarmonyOS鸿蒙Next中如何设置HdsVisualComponent圆角大小 在物理设备上这个组件四个角会自带一个圆角

设置outline border圆角属性都没有用

有没有办法把这个圆角去掉

cke_2956.jpeg


更多关于HarmonyOS鸿蒙Next中如何设置HdsVisualComponent圆角大小的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

尊敬的开发者，您好！

开发者您好：HdsVisualComponent目前为固定值：圆角 / 高度 * 2 = 0.1。圆角是 0.1 / 2 * 高度。圆角 = 0.05 * 组件高。

尊敬的开发者，您好！请问您是在什么样的业务场景中使用该能力，交互流程是怎样的，在哪一个环节遇到了问题？方便说明能力不满足可能带来的影响：什么时间用到？是否高频？有无三方库可以做到？若提供该能力，是否会造成大工作量返工？请您注意提供的内容不要包含您或第三方的非公开信息，如给您带来不便，敬请谅解。

更多关于HarmonyOS鸿蒙Next中如何设置HdsVisualComponent圆角大小的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


想在方形组件使用这个效果，

尊敬的开发者，您好！您的问题已受理，请您耐心等待，感谢您的理解与支持！

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

尊敬的开发者，您好！该功能正在评估中，感谢您的理解与支持。

您好，试试 borderRadius 属性：

import {
  HdsVisualComponent,
  HdsSceneController,
  HdsSceneType
} from '@kit.UIDesignKit';
import { Color, FontWeight, Alignment } from '@ohos.ui';
import { Component, Entry, State, Stack, Text, TapGesture } from '@ohos.ui.components';

@Entry
@Component
struct DualEdgeFlowLightDemo {
  // 用@State存颜色，方便点击修改
  @State bgColors: Color[] = [Color('#2196F3'), Color('#9C27B0')]; // 初始背景：蓝到紫
  @State firstFlowColor: Color = Color('#FFEB3B'); // 第一条流光：黄色
  @State secondFlowColor: Color = Color('#00E676'); // 第二条流光：绿色

  // 场景控制器：依赖颜色状态，所以用getter动态更新
  get sceneController(): HdsSceneController {
    return new HdsSceneController()
      .setSceneParams({
        backgroundMaskColors: this.bgColors,
        firstEdgeFlowLight: {
          startPos: 0,
          endPos: 0.6, // 第一条流光大半屏
          color: this.firstFlowColor
        },
        secondEdgeFlowLight: {
          startPos: 0,
          endPos: -0.6, // 第二条流光反方向大半屏
          color: this.secondFlowColor
        }
      });
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 1. 双边流光背景
      HdsVisualComponent()
        .scene(
          HdsSceneType.DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK,
          this.sceneController,
          () => {
            console.info('流光渲染成功，点击可切换颜色～');
          }
        )
        .width('80%')
        .height(56) // 胶囊按钮高度，固定更美观
        .borderRadius(28) // 圆角=高度/2，完美胶囊
        // 加点击手势：切换颜色
        .gesture(
          TapGesture()
            .onAction(() => {
              // 点击切换颜色：蓝紫→红绿，黄→红，绿→黄
              this.bgColors = this.bgColors[0] === Color('#2196F3') 
                ? [Color.Green, Color.Red] 
                : [Color('#2196F3'), Color('#9C27B0')];
              this.firstFlowColor = this.firstFlowColor === Color('#FFEB3B') 
                ? Color.Red 
                : Color('#FFEB3B');
              this.secondFlowColor = this.secondFlowColor === Color('#00E676') 
                ? Color('#FFEB3B') 
                : Color('#00E676');
            })
        )

      // 2. 叠加按钮文字
      Text('点击切换流光颜色')
        .fontSize(18)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color('#F5F5F5')) // 页面背景，突出胶囊
  }
}

这个圆角半径设置成0没有效果，似乎有个内置的最小值，

在HarmonyOS Next中，设置HdsVisualComponent的圆角大小，可以通过修改其borderRadius属性实现。该属性支持数值或百分比单位，例如设置borderRadius为’20px’或’50%’。具体代码示例如下：

HdsVisualComponent({
  borderRadius: '20px'
})

如需不同角分别设置，可使用borderRadius的数组形式，如[‘10px’, ‘20px’, ‘30px’, ‘40px’]，分别对应左上、右上、右下、左下四个角。

在HarmonyOS Next中，HdsVisualComponent 组件（如 HdsButton）的默认圆角是系统主题样式的一部分，直接通过 borderRadius 或 outline 等通用属性修改可能无效。

要自定义其圆角，正确的方法是使用组件提供的 样式扩展属性。对于 HdsButton，应使用 hdsButtonStyle 属性进行覆盖。

具体操作如下：

  1. 在组件上设置样式属性：在 HdsButton 的构造参数中，使用 hdsButtonStyle 来定义新的样式。
  2. 创建 HdsButtonStyle 对象：你需要实例化一个 HdsButtonStyle 对象，并在其中通过 builder 函数来自定义各个状态的样式。
  3. 覆盖 cornerRadius：在 builder 返回的 ButtonStyle 中，设置 cornerRadius 为你需要的值（例如 0 以去除圆角，或具体的 Dimension 值）。

示例代码：

import { HdsButton, HdsButtonStyle } from '@ohos/hds-design';

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 使用 HdsButtonStyle 覆盖默认样式
      HdsButton({ label: '方形按钮' })
        .hdsButtonStyle(
          new HdsButtonStyle.Builder()
            .builder((state) => {
              // 返回一个新的 ButtonStyle，覆盖圆角
              return new ButtonStyle.Builder()
                .cornerRadius(0) // 设置为0以去除圆角，或设置为其他数值如 '8vp'
                .build();
            })
            .build()
        )
    }
  }
}

关键点说明：

  • cornerRadius(0)：这将把按钮的四个角都设置为直角。你可以将其替换为 '8vp' 等值来设置统一的圆角大小。
  • 状态管理：上述示例代码中的 builder((state) => { ... }) 函数允许你根据按钮的不同状态（如按下、禁用、正常）返回不同的 ButtonStyle。如果你需要所有状态保持一致，只需在返回的样式中统一设置 cornerRadius 即可。
  • 组件差异：对于 HdsVisualComponent 家族的其他组件（如 HdsCard），其样式属性名可能不同（例如 hdsCardStyle），但修改思路一致，即使用对应的 HdsXXXStyle 并通过其 builder 返回的样式对象来设置 cornerRadius。

通过这种方式，你可以完全控制 HdsVisualComponent 系列组件的圆角外观。

回到顶部