Strikethrough text in widget?

After an hour or so of experimentation, I’ve figured out a way to “fake” a strikethrough effect. You can create a linear gradient with a solid line as the background, create a new stack, add your text, and then apply the gradient to the stack background.

This method doesn’t work if the text wraps onto another line, but for my purposes it works well. Hopefully this (and underlines) can be implemented natively at some point!

Here’s a basic script to calculate the gradient automatically given a strike height:

"use strict"

let widget = new ListWidget();
	
let borderTopBG = new LinearGradient()
let c1 = new Color("#F00")
let transparent = new Color("#000000", 0)

let strikeHeight = 5
	
borderTopBG.colors = [
	transparent,
	transparent,
	c1,
	c1,
	transparent,
	transparent
]

borderTopBG.locations = [
	0,
	0.52 - (strikeHeight / 200),
	0.52 - (strikeHeight / 200),
	0.52 + (strikeHeight / 200),
	0.52 + (strikeHeight / 200),
	1
]

let stack = widget.addStack()
stack.setPadding(5, 5, 5, 5)
stack.backgroundGradient = borderTopBG

let text = stack.addText("Hello World!")
text.textColor = c1
text.font = Font.title1()

widget.presentLarge()

which shows this:

1 Like