Finally got my project to compile!! now a nutty th...
# compose
c
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
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
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
I copy+pasted your code as a test and it worked just fine for me, again at HEAD rather than dev04 specifically
c
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
.