https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
c

codeslubber

01/30/2020, 4:32 AM
Finally got my project to compile!! now a nutty thing is happening with my stepper. On first render things look fine: but then when I click + I get this:
here is the code:
Copy code
package com.example.surveys_android

import androidx.compose.*
import androidx.ui.core.Alignment
import androidx.ui.core.Text
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.layout.*
import androidx.ui.material.Button
import androidx.ui.material.MaterialTheme
import androidx.ui.material.surface.Card
import androidx.ui.tooling.preview.Preview
import androidx.ui.unit.dp

@Composable
fun MeasureQuestionView() {
    val typography = (MaterialTheme.typography())

    val rangeOfValues = 115..125
    val currentValue = state {rangeOfValues.first}

    Card(shape = RoundedCornerShape(8.dp)) {
        Column(modifier = LayoutPadding(16.dp)) {
            Text("What was your blood sugar reading?", style = typography.h6)
            numberStepper(currentValue, rangeOfValues, "mg/dL")
        }
    }

}

@Composable
fun numberStepper(currentValue: MutableState<Int>, range: IntRange, units: String) {
    val typography = (MaterialTheme.typography())

    Container(height = 75.dp) {
        Row(LayoutPadding(20.dp)) {
            Button(text = "-", onClick = {
                if (currentValue.value > range.first) currentValue.value -= 1
            })
            Spacer(LayoutWidth(10.dp))
            Text(currentValue.value.toString(), style = typography.h5)
            Spacer(LayoutWidth(10.dp))
            Button(text = "+", onClick = {
                if (currentValue.value < range.last) currentValue.value += 1
            })
            Spacer(LayoutWidth(10.dp))
            Align(Alignment.CenterLeft){
                Text(units)
            }
        }
    }

}

@Preview
@Composable
fun PreviewMeasureViews() {
    MeasureQuestionView()
}
z

Zach Klippenstein (he/him) [MOD]

01/30/2020, 4:50 AM
I think it would be more idiomatic for 
numberStepper
to take in an 
Int
for the current value, and an event handler for when that value is changed. It also looks odd to me to pass in 
currentState
though since you’re not actually using it outside 
numberStepper
at all. But since 
MutableState
is an 
@Model
, i don’t know why this wouldn’t work. If you switch to just passing in a value and an event handler, does that fix it?
c

codeslubber

01/30/2020, 4:58 AM
Yeah I didn’t like this approach, but it was an example of a stepper in Compose (the only one I could find). It worked fine in 03. But the problem is the render is hosed. Are you thinking it’s confused and thinks there are 2 states?
r

Ryan Mentley

01/30/2020, 11:04 PM
I copy+pasted your code as a test and it worked just fine for me, again at HEAD rather than dev04 specifically
c

codeslubber

01/30/2020, 11:05 PM
so what do you suggest?
should I show you my gradle files?
I tried several variants on the state var
Damn nevermind this is fixed, just wrapped the text in a 
Container
.
Powered by