HarmonyOS 鸿蒙Next中设置羊皮纸背景色

HarmonyOS 鸿蒙Next中设置羊皮纸背景色

cke_128.jpeg

如何设置这种带有纹理的背景色


更多关于HarmonyOS 鸿蒙Next中设置羊皮纸背景色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

自己设置背景图片，或者背景元素

更多关于HarmonyOS 鸿蒙Next中设置羊皮纸背景色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中设置羊皮纸背景色可以使用ArkUI的组件样式属性。通过修改组件的backgroundColor属性实现，建议使用十六进制颜色代码或预定义颜色值。例如：

@Component
struct PaperBackground {
  build() {
    Column() {
      Text('羊皮纸效果')
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5E7C1')  // 羊皮纸色值
  }
}

关键点：

  1. 使用ArkTS语法
  2. 直接设置容器的backgroundColor属性
  3. 典型羊皮纸色值范围为#F5E7C1至#F0E5D3，

在HarmonyOS Next中设置羊皮纸纹理背景色可以通过以下方式实现：

  1. 使用XML布局定义背景：
<View
    ohos:background="$graphic:parchment_background"
    ohos:width="match_parent"
    ohos:height="match_parent"/>
  1. 创建graphic资源文件（在resources/base/graphic目录下）：
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#F5E7D0"/>  <!-- 羊皮纸底色 -->
    <corners
        ohos:radius="8vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="#D9C7A7"/>
</shape>
  1. 若要添加纹理效果，可以使用layer-list叠加纹理图片：
<layer-list xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <item>
        <shape ohos:shape="rectangle">
            <solid ohos:color="#F5E7D0"/>
        </shape>
    </item>
    <item>
        <bitmap
            ohos:src="$media:parchment_texture"
            ohos:gravity="center"
            ohos:alpha="0.2"/>
    </item>
</layer-list>
  1. 在代码中动态设置：
Component component = findComponentById(ResourceTable.Id_your_view);
ShapeElement background = new ShapeElement(getContext(), ResourceTable.Graphic_parchment_background);
component.setBackground(background);

注意事项：

  • 纹理图片建议使用PNG格式透明背景
  • 调整alpha值控制纹理明显程度
  • 可使用9-patch图片确保纹理在不同尺寸下的显示效果，
回到顶部