Jetpack Compose 文本字段 Alignment

Question

我是 Jetpack Compose 的新手。 我想從 TextField 的 centervertically-start position 開始輸入，但我不能將“Example”置於 centervertically-start position。

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp)
        .shadow(5.dp)
        .background(Color.Yellow),


) {

    BasicTextField(
        value = text,
        onValueChange = {onvalueChange(it)},
        modifier = Modifier.weight(10f).background(Color.Blue).fillMaxSize(),
        singleLine = true,
        textStyle = LocalTextStyle.current.copy(
            textAlign = TextAlign.Center
        )


    )
    Image(painter = painterResource(id = R.drawable.ic_baseline_search_24),
        contentDescription = "Search",
        modifier = Modifier.weight(2f).fillMaxSize()

    )

這是我的代碼

這就是我想做的。

Answer 1

Row對此有一個verticalAlignment 。 此外，如果您希望您的 TextField 像圖片一樣左對齊，請刪除textAlign （或更改它但它默認為開始）

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp)
        .shadow(5.dp)
        .background(Color.Yellow),
    verticalAlignment = Alignment.CenterVertically,
) {

    BasicTextField(
        value = text,
        onValueChange = {onvalueChange(it)},
        modifier = Modifier.weight(10f).background(Color.Blue).fillMaxSize(),
        singleLine = true,
    )
    Image(painter = painterResource(id = R.drawable.ic_baseline_search_24),
        contentDescription = "Search",
        modifier = Modifier.weight(2f).fillMaxSize()

    )
}

Answer 2

使用背景框控制，請嘗試：

Row(
    modifier = Modifier
    .fillMaxWidth()
    .height(50.dp)
    .shadow(5.dp)
    .background(Color.Yellow),
    ) {
        Box(Modifier.weight(10f).background(Color.Blue).fillMaxSize(),contentAlignment = CenterStart){
            BasicTextField(
                value = text,
                onValueChange = { onvalueChange(it) },
                modifier = Modifier.wrapContentHeight(
                    Alignment.CenterVertically),
                singleLine = true,
                textStyle = LocalTextStyle.current.copy(
                    textAlign = TextAlign.Start
                )
            )
        }
        Image(
            Icons.Filled.Search,
            contentDescription = "Search",
            modifier = Modifier.weight(2f).fillMaxSize()
    
        )
    }