Hi all. I have been looking for an example of how ...
# compose-desktop
t
Hi all. I have been looking for an example of how to change the background of an
IconButton/Icon
when the mouse hovers over it. Much like what happens in Winddows, when you move the mouse over the window close button. I stumble on the
MutableInteractSource
but haven't found anything that allows me to et the background. Does anyone have any example I could leverage. Thanks
a
Check
LocalIndication
. I think the default indication (indication when you do not apply a material theme) is close to what you want.
t
@Albert Chang Thanks, that looks like what I need. I'll see where that goes.
l
Indication is more for generic re-usable effects, such as a ripple / overlay - it’s not really suited for changing parameters to a component, like background color. Instead for this case you can just do something like:
Copy code
val interactionSource = remember { MutableInteractionSource() }

val isHovered by interactionSource.collectIsHoveredAsState()
    IconButton(
... interactionSource) {
    }
And then use
isHovered
to draw a
Modifier.background
or similar, depending on your specific use case
This would also allow you to change
LocalContentColor
/ otherwise modify the icon inside in addition to changing background color, to make sure that the constrast is still accessible / to add animations / etc
k
Thankyou!
t
@Louis Pullen-Freilich [G] outstanding thank you
Thanks for your input and here is where I ended up with a themed title bar for a dialog in case anyone else is looking for something similiar.... YMMV I create a undecorated Dialog and the content contains a column, with the DialogTitleBar as the first element in the column content. Thanks again
l
You should be able to remove the
hoverable
, since
clickable
internally also supports hover events by default
t
ok, thanks for that. It's really a
voyage of discovery
to find these nuances.
l
Yes, this is a known area of lacking documentation
t
as a nit, and I don't know if you have any input to this and really not worth a ticket, but it would have been nice if the clickable overload with the
interactionSource
parameter had a null default for the
indication
parameter
c
@Louis Pullen-Freilich [G] clickable supports hover??
l
Yep, the layering is like: • focusable supports focus events • hoverable supports hover events • draggable supports drag events And then
clickable
is a higher level thing, that supports press events and combines focusable / hoverable internally - so it’s just a combined modifier that handles press / focus / hover, for higher level components to build on top of
👍 1