自定义绘制设置
当某些组件本身的绘制内容不满足需求时,可使用自定义组件绘制功能,在原有组件基础上部分绘制、或者全部自行绘制,以达到预期效果。例如:独特的按钮形状、文字和图像混合的图标等。自定义组件绘制提供了自定义绘制修改器,来实现更自由地组件绘制。
说明:
从API Version 12开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
drawModifier
drawModifier(modifier: DrawModifier | undefined)
设置组件的自定义绘制修改器。
系统能力: SystemCapability.ArkUI.ArkUI.Full
组件支持范围:
AlphabetIndexer、Badge、Blank、Button、CalendarPicker、Checkbox、CheckboxGroup、Circle、Column、ColumnSplit、Counter、DataPanel、DatePicker、Ellipse、Flex、FlowItem、FolderStack、FormLink、Gauge、Grid、GridCol、GridItem、GridRow、Hyperlink、Image、ImageAnimator、ImageSpan、Line、List、ListItem、ListItemGroup、LoadingProgress、Marquee、Menu、MenuItem、MenuItemGroup、NavDestination、Navigation、Navigator、NavRouter、NodeContainer、Path、PatternLock、Polygon、Polyline、Progress、QRCode、Radio、Rating、Rect、Refresh、RelativeContainer、RichEditor、Row、RowSplit、Scroll、ScrollBar、Search、Select、Shape、SideBarContainer、Slider、Stack、Stepper、StepperItem、Swiper、SymbolGlyph、TabContent、Tabs、Text、TextArea、TextClock、TextInput、TextPicker、TextTimer、TimePicker、Toggle、WaterFlow、XComponent
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
modifier | DrawModifier | undefined | 是 | 自定义绘制修改器,其中定义了自定义绘制的逻辑。 默认值:undefined 说明: 每个自定义修改器只对当前绑定组件的FrameNode生效,对其子节点不生效。 |
DrawModifier
DrawModifier可设置前景(drawFront)、内容(drawContent)和背景(drawBehind)的绘制方法,还提供主动触发重绘的方法invalidate。每个DrawModifier实例只能设置到一个组件上,禁止进行重复设置
系统能力: SystemCapability.ArkUI.ArkUI.Full
drawFront
drawFront?(drawContext: DrawContext): void
自定义绘制前景的接口,若重载该方法则可进行前景的自定义绘制。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
drawContext | DrawContext | 是 | 图形绘制上下文。 |
drawContent
drawContent?(drawContext: DrawContext): void
自定义绘制内容的接口,若重载该方法可进行内容的自定义绘制,会替换组件原本的内容绘制函数。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数: