> 文档中心 > 鸿蒙 background_element设置渐变色

鸿蒙 background_element设置渐变色

1.目前shape无法设置渐变色可通过代码设置
2.工具类:

package com.cmmboy.xzwp.utils;import ohos.aafwk.ability.AbilitySlice;import ohos.agp.colors.RgbColor;import ohos.agp.components.Component;import ohos.agp.components.element.ShapeElement;import ohos.app.AbilityContext;public class ShapeUtils {    /**     * 渐变色背景     */    public static ShapeElement getButtonShape(AbilityContext context, float radius, int resStartId, int resEndId) { ShapeElement shapeElement = new ShapeElement(); shapeElement.setCornerRadius(radius); shapeElement.setShape(ShapeElement.RECTANGLE); //color关键值 RgbColor[] rgbColors = new RgbColor[]{  RgbColor.fromArgbInt(context.getColor(resStartId)),  RgbColor.fromArgbInt(context.getColor(resEndId))}; shapeElement.setRgbColors(rgbColors); //线性变化:对应type="linear" shapeElement.setShaderType(ShapeElement.LINEAR_GRADIENT_SHADER_TYPE); //变化方向,从左到右:对应angle="0" shapeElement.setGradientOrientation(ShapeElement.Orientation.LEFT_TO_RIGHT); return shapeElement;    }    /**     * 通过id获取View     */    public static <T extends Component> T findById(AbilitySlice context, int id) { return (T) context.findComponentById(id);    }}

2.设置

DirectionalLayout typeLayout1 = component.findComponentById(ResourceTable.Id_typeLayout1);typeLayout1.setBackground(ShapeUtils.getButtonShape(this, 20, ResourceTable.Color_color_Type1_Start, ResourceTable.Color_color_Type1_End));

3.color.json

{  "color": [    {      "name": "color_Black",      "value": "#FF1D1C1C"    },    {      "name": "color_Green",      "value": "#1AA034"    },    {      "name": "color_Type1_Start",      "value": "#4facfe"    },    {      "name": "color_Type1_End",      "value": "#00f2fe"    },    {      "name": "color_Type2_Start",      "value": "#43e97b"    },    {      "name": "color_Type2_End",      "value": "#38f9d7"    },    {      "name": "color_Type3_Start",      "value": "#b465da"    },    {      "name": "color_Type3_End",      "value": "#ee609c"    },    {      "name": "color_Type4_Start",      "value": "#f83600"    },    {      "name": "color_Type4_End",      "value": "#f9d423"    },    {      "name": "color_Type5_Start",      "value": "#5271C4"    },    {      "name": "color_Type5_End",      "value": "#ECA1FE"    },    {      "name": "color_Type6_Start",      "value": "#0acffe"    },    {      "name": "color_Type6_End",      "value": "#495aff"    },    {      "name": "color_Type7_Start",      "value": "#473B7B"    },    {      "name": "color_Type7_End",      "value": "#30D2BE"    }  ]}

书本网