Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】文字輸入框元件

 

【從零開始學 Jetpack Compose 程式設計】

線上教學課程目錄: https://bit.ly/3JF4SFA
Youtube 課程播放清單：https://bit.ly/3tFjRbx
Udemy 線上課程：https://bit.ly/3MbVnhO

輸入文字，即時顯示在文字標籤上

Column{
    var textVal by remember { mutableStateOf("") }

    TextField(
        value = textVal,
        onValueChange = { textVal = it}
    )

    Text(textVal)
}

鍵盤種類

var textVal by remember { mutableStateOf("") }

TextField(
    value = textVal,
    onValueChange = { textVal = it },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)

密碼密文顯示

var textVal by remember { mutableStateOf("") }

TextField(
    value = textVal,
    onValueChange = { textVal = it },
    visualTransformation = PasswordVisualTransformation()
)

按鈕按下獲得文字

Column {
    var textVal by remember { mutableStateOf("") }
    var inputData by remember { mutableStateOf("") }

    TextField(
        value = textVal,
        onValueChange = { textVal = it }
    )

    Button(onClick = {
        inputData = textVal
    }) {
        Text(text = "獲取文字框文字")
    }

    Text(inputData)
}

其他種樣式

https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#overview

TextField
BasicTextField
OutlinedTextField

BMI計算機

@Composable
fun Demo() {
    var heightVal by rememberSaveable { mutableStateOf("") }
    var weightVal by rememberSaveable { mutableStateOf("") }
    var resultVal by rememberSaveable { mutableStateOf("") }


    ConstraintLayout(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
    ) {

        val (textTitle,
            inputHeight,
            inputWeight,
            textResult,
            btnCalc,
            btnClean) = createRefs()

        val topGuideline = createGuidelineFromTop(0.1f)

        Text("BMI計算機",
            fontSize = 50.sp,
            modifier = Modifier.constrainAs(textTitle) {
                top.linkTo(topGuideline)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            })

        TextField(
            value = heightVal,
            onValueChange = { heightVal = it },
            label = { Text("身高(cm)") },
            singleLine = true,
            modifier = Modifier
                .constrainAs(inputHeight) {
                    top.linkTo(textTitle.bottom, 20.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )

        TextField(
            value = weightVal,
            onValueChange = { weightVal = it },
            label = { Text("體重(kg)") },
            singleLine = true,
            modifier = Modifier.constrainAs(inputWeight) {
                top.linkTo(inputHeight.bottom, 20.dp)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
        )

        if (resultVal.isNotBlank()) {
            Text(resultVal,
                fontSize = 20.sp,
                modifier = Modifier.constrainAs(textResult) {
                    top.linkTo(inputWeight.bottom, 20.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                })
        }

        Button(onClick = {
            resultVal = calcBMI(height = heightVal, weight = weightVal)
        },
            modifier = Modifier
                .constrainAs(btnCalc) {
                    bottom.linkTo(parent.bottom, 10.dp)
                    start.linkTo(parent.start)
                    end.linkTo(btnClean.start)
                }) {
            Text("計算", fontSize = 50.sp)
        }

        Button(onClick = {
            heightVal = ""
            weightVal = ""
            resultVal = ""
        },
            modifier = Modifier
                .constrainAs(btnClean) {
                    bottom.linkTo(parent.bottom, 10.dp)
                    start.linkTo(btnCalc.end)
                    end.linkTo(parent.end)
                }) {
            Text("清除", fontSize = 50.sp)
        }
    }
}


fun calcBMI(height: String, weight: String): String {

    val bmi = weight.toDouble() / (height.toDouble() / 100).pow(2.0)
    val bmiData = String.format("%.1f", bmi)

    var result = ""
    if (bmi < 18.5) {
        result = "太瘦了～"
    } else if (bmi > 18.5 && bmi < 24.9) {
        result = "標準，很棒喔～"
    } else if (bmi > 24.9 && bmi < 30) {
        result = "過胖!!!"
    } else {
        result = "肥胖!"
    }
    return "你的 BMI 為: $bmiData \n $result";
}