android compose使用约束布局

package com.lunky.shop

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.lunky.shop.ui.theme.LunkyshopTheme
import androidx.compose.foundation.layout.Row
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.Person
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LunkyshopTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android1")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    LunkyshopTheme {
        //Greeting("Android")
        LoginPage()
    }
}

@Composable
fun LoginPage() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (layout1,title, username, password, checkbox, loginButton) = createRefs()
        ConstraintLayout(
            modifier = Modifier.constrainAs(layout1) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            }
        ) {
            Text(
                text = "Welcome to Login Page",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.constrainAs(title) {
                    top.linkTo(parent.top, margin = 32.dp)
                    centerHorizontallyTo(parent)
                }
            )

            OutlinedTextField(
                value = "",
                onValueChange = { /* TODO */ },
                label = { Text("Username") },
                modifier = Modifier.constrainAs(username) {
                    top.linkTo(title.bottom, margin = 16.dp)
                    start.linkTo(parent.start, margin = 32.dp)
                    end.linkTo(parent.end, margin = 32.dp)
                }
            )

            OutlinedTextField(
                value = "",
                onValueChange = { /* TODO */ },
                label = { Text("Password") },
                modifier = Modifier.constrainAs(password) {
                    top.linkTo(username.bottom, margin = 8.dp)
                    start.linkTo(parent.start, margin = 32.dp)
                    end.linkTo(parent.end, margin = 32.dp)
                }
            )

            val checkedState = remember { mutableStateOf(false) }
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.constrainAs(checkbox) {
                    top.linkTo(password.bottom, margin = 16.dp)
                    start.linkTo(password.start, margin = 0.dp)
                }
            ) {
                Checkbox(
                    checked = checkedState.value,
                    onCheckedChange = { checkedState.value = it }
                )
                Text(
                    text = "I have read and agree to the ",
                    fontSize = 12.sp,
                    color = Color.Gray
                )
                TextButton(onClick = { /* TODO */ }) {
                    Text(text = "Privacy Policy", fontSize = 12.sp, color = Color.Blue)
                }
                Text(text = " and ", fontSize = 12.sp, color = Color.Gray)
                TextButton(onClick = { /* TODO */ }) {
                    Text(text = "Privacy Agreement", fontSize = 12.sp, color = Color.Blue)
                }
            }

            Button(
                onClick = { /* TODO */ },
                modifier = Modifier.constrainAs(loginButton) {
                    top.linkTo(checkbox.bottom, margin = 16.dp)
                    start.linkTo(parent.start, margin = 32.dp)
                    end.linkTo(parent.end, margin = 32.dp)
                }
            ) {
                Text(text = "Login")
            }
        }
    }
}