How to make row in LazyColumn clickable-CodePudding

How can the ripple effect be applied to the whole row of an item within a LazyColumn rather than just the text itself? Does Text need to be in a Row with a clickable modifier, or should something else be done?

class MainActivity : ComponentActivity() {
    private var itemArray: Array<String>? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        itemArray = resources.getStringArray(R.array.array_breads)

        super.onCreate(savedInstanceState)
        setContent {
            AdaptiveTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MyScaffold(itemArray = itemArray as Array<out String>)
                }
            }
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MyScaffold(itemArray: Array<out String>) {
    val listState = rememberLazyListState()

    Scaffold(
        topBar = {
            SmallTopAppBar(
                title = {
                    Text(text = stringResource(id = R.string.breads))
                }
            )
        },
        content = {
            LazyColumn(
                modifier = Modifier.fillMaxSize(),
                state = listState,
                ) {
                items(itemArray) { item ->
                    Row(modifier = Modifier.clickable {  }) {
                        Text(
                            modifier = Modifier
                                .clickable { },
                            text = item
                        )
                    }
                }
            }
        }
    )
}

CodePudding user response：

Sir you'd need to make sure the Row fills up the entire width of the screen. Just add a Modifier.fillMaxWidth() to the Row, and you'll be good.