Is there an “easy” way to set all of a composable’...
# compose
j
Is there an “easy” way to set all of a composable’s inner composables as
disabled
? Maybe something with CompositionLocals? (what I’m trying to achieve is to have an entire screen to be disabled under certain conditions)
c
The easy way is just to wrap the screen content in an
if
statement. You shouldn’t need to make it more complicated than that.
j
But I still want the screen’s UI to be shown albeit in a disabled state.
c
Ah, you’re meaning the enabled/disabled state of all form controls? Yeah that makes sense. But from looking at the source, all those controls just use a simple boolean flag and no Locals to control enabled/disabled state. There probably isn’t a good option here, other than manually wrapping those controls into custom functions that do read from a custom Local
😮 1
c
I would talk with your designer and maybe suggest a scrim over top of the UI that's disabled. I'd say it's bad UX to allow a user to be able to click things without any indication that they're disabled. Then if your content is disabled you show the scrim overtop of it (Which would consume touch events so you don't have to worry about disabled states)
1
c
Drawing scrims (at whatever opacity you want) is also simple with drawRect within a drawWithContent/drawBefore modifier that you can conditionally add to “disable” all content in a Composable. Effectively block all input. But I would suggest as above talking with your designer to make the UI clearly look disabled
👍 1
j
Do you think using a scrim like proposed will completely prevent input or perhaps using accessibility frameworks users might still be able to select and click items beneath the scrim?
c
I don’t think so but @Zach Klippenstein (he/him) [MOD] might have a better idea
z
I don’t unfortunately, but this is an increasingly common request so please star this bug: https://issuetracker.google.com/214231672
👌 1
j
@Chris Sinco [G] re: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1648172384389969?thread_ts=1648131615.066659&cid=CJLTWPH7S I’ve tried using the
drawWithContent
modifier as you suggested, I got a semi transparent scrim to draw above my content, but it does not block any input. Is this expected? Code:
Copy code
Box(
  modifier = Modifier.then(
    if (isLocked) {
      Modifier
        .drawWithContent {
          drawContent()
          drawRect(color = Color.Gray, alpha = 0.1f)
        }
    } else Modifier
  )
) {...}
c
Not sure - I think the issue submitted above would actually solve the problem fully