android-jetpack-compose

How to keep the scrolled bottom item visible when ime appears?


|-|i

I'm trying to make a column able to keep visible the bottom item when ime gets displayed

I have a text field at bottom of screen, and above is the column, filled with random text to make it scroll.

I tried a bit Modifier.imeNestedScroll(), but I struggle, I'm not even sure it would do the job

Here is my code currently, but it's kinda buggy...

ComposeTestTheme {
    Scaffold(modifier = Modifier.fillMaxSize())
    { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .consumeWindowInsets(innerPadding)
                .fillMaxSize()
        )
        {
            LazyColumn(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .border(2.dp, Color.Red)
                    .imeNestedScroll()
            )
            {
                items(50) { index ->
                    Text(text = "item: $index")
                }
            }
            TextField(
                value = "",
                onValueChange = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .border(2.dp, Color.Black)
                    .imePadding()
            )
        }
    }
}

Could someone help?


Solution

  • Done this way:

    Scaffold(modifier = Modifier.fillMaxSize())
    { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .consumeWindowInsets(innerPadding)
                .fillMaxSize()
        )
        {
            val list = remember { (1..130).map{ it.toString() }.toList() }
            LazyColumn(
                reverseLayout = true,
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .border(2.dp, Color.Red)
            )
            {
                items(list.size) { message ->
                    Text(text = message.toString())
                }
            }
    
            TextField(
                value = "",
                onValueChange = { },
                modifier = Modifier
                    .imePadding()
                    .fillMaxWidth()
                    .border(2.dp, Color.Black)
            )
        }
    }