HarmonyOS 鸿蒙Next中如何使用borderRadius和borderColor属性为表单控件创建一致样式

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

HarmonyOS 鸿蒙Next中如何使用borderRadius和borderColor属性为表单控件创建一致样式

请教一下，鸿蒙开发中，在HarmonyOS NEXT中，如何使用borderRadius和borderColor属性为表单控件创建一致的样式？

Harmonyos Next教程
2 回复

解决措施：

使用多态样式，在组件的StateStyles接口中，定义组件不同状态下的样式。

示例代码：

//xxx.ts
@Entry
@Component
struct StyleExample {
  @State isEnable: boolean = true;

  @Styles pressedStyles() {
    .backgroundColor("#ED6F21")
    .borderRadius(10)
    .borderStyle(BorderStyle.Dashed)
    .borderWidth(2)
    .borderColor('#33000000')
    .width(120)
    .height(30)
    .opacity(1)
  }
  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
      Text("pressed")
        .backgroundColor('#0A59F7')
        .borderRadius(20)
        .borderStyle(BorderStyle.Dotted)
        .borderWidth(2)
        .borderColor(Color.Red)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .stateStyles({
          pressed: this.pressedStyles
        })
        .margin({
          bottom: 20
        })
        .textAlign(TextAlign.Center)
    }
    .width(350)
    .height(300)
  }
}

参考链接：

https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md/

更多关于HarmonyOS 鸿蒙Next中如何使用borderRadius和borderColor属性为表单控件创建一致样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中，为表单控件（如按钮、输入框等）使用borderRadius和borderColor属性来创建一致样式，可以通过以下方式进行：

对于borderRadius，它定义了控件边框的圆角程度。在XML布局文件中，可以通过设置控件的ohos:border_radius属性来指定圆角半径。例如：

<Button
    ohos:id="$+id:my_button"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:text="圆角按钮"
    ohos:background_element="$graphic:round_rectangle_shape"
    ohos:border_radius="20vp"/>

注意，这里可能需要一个自定义的round_rectangle_shape图形资源来配合实现圆角效果。

对于borderColor，它定义了控件边框的颜色。在HarmonyOS中，边框颜色通常通过背景图形资源中的stroke属性来设置。例如，在res/graphic目录下的XML文件中定义：

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <stroke
        ohos:width="2vp"
        ohos:color="#FF0000"/> <!-- 红色边框 -->
    <corners
        ohos:radius="20vp"/>
</shape>

然后在控件中引用这个图形资源作为背景。

请确保你的控件支持这些属性，并且正确地引用了所需的图形资源。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部