JetPack 撰写 - 如何在 CircularProgressIndicator 处于活动状态时禁用交互？

Question

当进度条处于活动状态时禁用后台交互的正确方法是什么way/approach。

  Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
  ) {
    // Some content (when anyState is true, disable screen interaction)
    if(anyState){
       MaterialCircularProgressIndicator()
    }
  }

Answer 1

你需要另一个盒子，你可以用半透明背景填充它（我更喜欢这样做让用户明白为什么他的触摸不起作用），你可以用 pointerInput 中断触摸。这与 Compose uses to block touches under the Surface.

完全相同的技术

if(anyState){
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.Black.copy(alpha = 0.3f))
            .pointerInput(Unit) {}
    )
    CircularProgressIndicator()
}

Answer 2

当任何状态为真时，您应该向 Box 添加 clickable() 修饰符。

Box(
    modifier = Modifier
        .fillMaxSize()
        .let {
              return@let if (anyState) {
                   it.clickable {}
               } else it
         },
         contentAlignment = Alignment.Center
) {
      MaterialCircularProgressIndicator()
}

Answer 3

这对我有用。

    if (anyState) {
        Box(modifier = Modifier
            .fillMaxSize()
            .clickable(
                indication = null, // disable ripple effect
                interactionSource = remember { MutableInteractionSource() },
                onClick = { }
            ),
            contentAlignment = Alignment.Center
        ) {
            CircularProgressIndicator()
        }
    }