Inline Gradient Chips in HarmonyOS: CustomSpan, Text Wrapper, and ImageSpan Approaches

Read the original article：Inline Gradient Chips in HarmonyOS: CustomSpan, Text Wrapper, and ImageSpan Approaches Inline Gradient Chips in HarmonyOS: CustomSpan, Text Wrapper, and ImageSpan Approaches Requirement Description Render inline text where a specific “span” segment has a gradient background . Direct linearGradient on Span doesn’t work, so we provide three working approaches. Background Knowledge Span : child of Text / ContainerSpan ; does not support universal attributes , so linearGradient is ignored. Use Text for universal styling or custom-draw with CustomSpan . Docs: Span , Text , ContainerSpan Universal gradient attribute : linearGradient works on components that support universal attributes (e.g., Text ). Docs: linearGradient Styled strings & CustomSpan : draw your own background/text for inline segments. Docs: CustomSpan (Styled String) , Example – Span Graphics API for gradients : set a shader on the brush. Docs (search please): Brush.setShaderEffect , ShaderEffect.cre