HarmonyOS鸿蒙Next中buttom样式怎么添加？

HarmonyOS鸿蒙Next中buttom样式怎么添加？ BUTTON样式很丰富，什么圆角的，直角的，圆形的等等，这些样式要怎么添加进来还有编写格式要求。

<Button
    ohos:id="$+id:button"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:left_margin="88vp"
    ohos:right_margin="88vp"
    ohos:top_margin="70vp"
    ohos:text_size="19fp"
    ohos:text="点我"
    ohos:background_element="$graphic:color_blue_element" //按照网上提示，编译报错
    ohos:text_color="white"
/>

更多关于HarmonyOS鸿蒙Next中buttom样式怎么添加？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

ohos=“http://schemas.huawei.com/res/ohos”

这一句会报错，

更多关于HarmonyOS鸿蒙Next中buttom样式怎么添加？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


飘红看似报错但是似乎不影响编译，可以运行的

在app目录下resources/base文件目录下创建graphic目录

如果要实现圆角等 需要编写xml文件 例如新建bg_common_unpress_btn.xml 如下

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="#2E9EED"/>
</shape>

shape类型与android的shape类型相似。

使用方式为

ohos:background_element="$graphic:bg_common_unpress_btn"

结帖！！！！！！！！！！！！！

妙啊，加了后飘红问题完美解决

亲爱滴开发者 ，这个问题已经在处理中啦，稍后答复你哟 ，么么哒

在HarmonyOS（鸿蒙）Next中，可以通过XML或ArkUI框架为Button组件添加样式。使用XML时，可以在布局文件中定义Button并设置其样式属性，如背景颜色、字体大小等。例如：

<Button
    ohos:id="$+id:myButton"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="Click Me"
    ohos:text_size="20fp"
    ohos:background_element="$graphic:button_background"
    ohos:padding="10vp"/>

其中，ohos:background_element用于设置按钮背景，可以通过$graphic引用资源文件中的图形。

在ArkUI框架中，可以通过Button组件及其属性链式调用设置样式：

Button('Click Me')
    .fontSize(20)
    .backgroundColor(Color.Blue)
    .padding(10)
    .onClick(() => {
        // 点击事件处理
    })

fontSize设置字体大小，backgroundColor设置背景颜色，padding设置内边距。

在HarmonyOS鸿蒙Next中，可以通过XML或Java代码设置Button样式。XML方式如下：

<Button
    android:id="@+id/myButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    android:background="@drawable/button_style"
    android:textColor="@color/white"/>

其中，@drawable/button_style是自定义的背景样式，@color/white是文本颜色。Java代码方式如下：

Button myButton = findViewById(R.id.myButton);
myButton.setBackgroundResource(R.drawable.button_style);
myButton.setTextColor(getResources().getColor(R.color.white));

通过这两种方式，可以灵活地自定义Button的外观。

回到顶部