Jetpack Compose 对扩展内容的涟漪效果适应错误

Question

我在 Jetpack Compose 中有一个表面，单击即可展开。

var expanded by remember { mutableStateOf(false) }
Column(modifier = Modifier.fillMaxSize()) {
  Surface(color = Color.Gray, onClick = { expanded = !expanded }) {
    Column {
      Box(Modifier.fillMaxWidth().height(50.dp))
      AnimatedVisibility(visible = expanded) { Box(Modifier.fillMaxWidth().height(200.dp)) }
    }
  }
}

我的问题是，我希望波纹填充整个展开的容器，如here所示（最右边的视频，搜索栏的展开）。 实际上，纹波太小，突然停止了：

我想这可能是因为尺寸是在动画开始时确定的，并且不适应更改后的表面尺寸。有什么办法可以解决这个问题吗？

Answer 1

您可以尝试一些方法来产生所需的连锁反应。

1. 确保您的可组合视图包含在父主题中，这样您将获得默认的波纹工厂访问权限。

2. 使用修改器手动使用效果，如下所示。我已将颜色设置为红色以获得更好的可见性，您可以跳过该参数以使用默认值。

   val modifier = Modifier
        .clickable(
            indication = rememberRipple(bounded = true, color = Color.Red),
            interactionSource = remember { MutableInteractionSource() }, 
            onClick = {}
        )
   

结果：

示例代码：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composeplayground.ui.theme.ComposePlaygroundTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposePlaygroundTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    var expanded by remember { mutableStateOf(false) }
    Column(modifier = Modifier.fillMaxSize()) {
        Surface(color = Color.Gray) {
            Column(
                modifier = Modifier
                    .clickable(indication = rememberRipple(bounded = true, color = Color.Red),
                        interactionSource = remember { MutableInteractionSource() },
                        onClick = { expanded = !expanded })
            ) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                )
                AnimatedVisibility(visible = expanded) {
                    Box(
                        Modifier
                            .fillMaxWidth()
                            .height(200.dp)
                    )
                }
            }
        }
    }
}