如何將文本與元素的開頭對齊

我是新作曲。在構建注冊頁面時，我需要一些 UI 幫助。這是我實作的片段。

Column(
    modifier = Modifier
        .padding(0.dp, 50.dp, 0.dp, 0.dp)
        .width(Max)
        .verticalScroll(rememberScrollState()),
    horizontalAlignment = Alignment.CenterHorizontally
) {

    
    Row(
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Spacer(modifier = Modifier.weight(0.1F))
        OutlinedTextField(
            label = {
                Text(
                    text = "First Name",
                    style = TextStyle(fontSize = Dimens.body4)
                )
            },
            value = firstName,
            onValueChange = { firstName = it },
            modifier = Modifier
                .weight(0.5F)
                .padding(1.dp)
        )
        Spacer(modifier = Modifier.weight(0.1F))

        OutlinedTextField(
            label = {
                Text(
                    text = "Last Name",
                    style = TextStyle(fontSize = Dimens.body4)
                )
            },
            value = lastName,
            onValueChange = { lastName = it },
            modifier = Modifier.weight(0.5F)
        )
        Spacer(modifier = Modifier.weight(0.1F))
    }
    Spacer(modifier = Modifier.height(Dimens.grid_3_5))
    OutlinedTextField(
        label = {
            if (isPhoneSignup)
                Text(
                    text = phone,
                    style = TextStyle(fontSize = Dimens.body4)
                )
            else
                Text(
                    text = email,
                    style = TextStyle(fontSize = Dimens.body4)
                )
        },
        leadingIcon = {
            if (isPhoneSignup)
            Icon(
                imageVector = Filled.Phone,
                contentDescription = null
            )
            else
                Icon(
                    imageVector = Filled.Email,
                    contentDescription = null
                )
        },
        value = login,
        onValueChange = { login = it },
    )

    Spacer(modifier = Modifier.height(Dimens.grid_1))

    ClickableText(text = AnnotatedString(loginTypeText),
        onClick = {
            isPhoneSignup = !isPhoneSignup
        }
    )
}

我得到了這樣的結果。

我真正要實作的是

1. TextField 水平居中Login with Phone Number的同時開始的文本。Email TextField

2. 使first name last name文本欄位的大小與我的情況完全相同。這 2 個文本欄位Email TextField占用的空間比Email TextField我的情況更多。

uj5u.com熱心網友回復：

寬度大小由 定義Column，然后應用于fillMaxWidth()子項以確保填充整個寬度。
然后在您的 Row 中，您可以使用Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally)以避免在里面使用 Spacer：

Column(
    modifier = Modifier
        .padding( horizontal= 20.dp )
        .fillMaxWidth() //your custom width
    horizontalAlignment = Alignment.CenterHorizontally
) {

    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
        verticalAlignment = Alignment.CenterVertically,
    ) {

        OutlinedTextField(
            modifier = Modifier.weight(1f)
        )

        OutlinedTextField(
            modifier = Modifier.weight(1f)
        )

    }

    Spacer(modifier = Modifier.height(10.dp))

    OutlinedTextField(
        modifier = Modifier.fillMaxWidth(),
    )

    Spacer(modifier = Modifier.height(10.dp))

    ClickableText(
        modifier = Modifier.fillMaxWidth(),
    )
}

標籤：安卓科特林android-jetpack-compose

上一篇：WillPopScope在Flutter中不適用于IOS

下一篇：計算熊貓資料框列的累積計數