Home > Back-end >  Column moves button
Column moves button

Time:12-28

My scrollable column moves button if text is too long. I want to keep my green button at the bottom of the screen.enter image description here

 Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
    Column {
    Spacer(modifier = Modifier.height(Padding.contentBig))
            Column(modifier = Modifier.verticalScroll(rememberScrollState()).fillMaxSize().padding(bottom = 60.dp)) {
                title.Widget()
                Spacer(modifier = Modifier.height(Padding.contentBig))
                description.Widget()
            }
    }
    Row(modifier = Modifier.weight(1f, false)) {
            button.Widget(
                onClick = { onClickListener?.invoke(it) }
            )
        }
    }

CodePudding user response:

You can apply the weight modifier to the 1st nested Column:

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.SpaceBetween
) {
    Column(modifier = Modifier.weight(1f, true)) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ){

         //....
            
        }
    }
    Row() {
        Button(
            onClick = {  }
        ){}
    }
}

CodePudding user response:

You can use a Scaffold with a bottomBar:

  val scaffoldState = rememberScaffoldState()
  val scrollState = rememberScrollState()

  Scaffold(
    backgroundColor = Color.White,
    scaffoldState = scaffoldState,
    modifier = Modifier.fillMaxSize(),
    bottomBar = {
      Button(onClick = onClickListener) { // <-- your button
      }
    },
    content = { paddingValues ->
      val padding = paddingValues

      Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
      ) {
        Column {
          Spacer(modifier = Modifier.height(Padding.contentBig))
          Column(modifier = Modifier.verticalScroll(rememberScrollState()).fillMaxSize().padding(bottom = 60.dp)) {
            title.Widget()
            Spacer(modifier = Modifier.height(Padding.contentBig))
            description.Widget()
          }
        }
      }
    }
  )
  • Related