鸿蒙 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" } ]}