TextAlign.Center を指定した TextStyle を渡します。
BasicTextField(
...,
textStyle = TextStyle.Default.copy(textAlign = TextAlign.Center),
...
)
BasicTextField(
...,
textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
...
)
BasicTextField(
...,
textStyle = MaterialTheme.typography.body1.copy(textAlign = TextAlign.Center),
...
)
MDC の TextField と OutlinedTextField は innerTextField の位置が動かせないので、幅が innerTextField より大きい場合は左に寄った innerTextField の中で中央揃えになってしまいます。そのうち設定できるようになるのかもしれません。
@Composable
fun CenteringTextField() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
var text1 by remember { mutableStateOf("") }
TextField(
value = text1,
onValueChange = { text1 = it },
textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
)
Spacer(modifier = Modifier.height(32.dp))
var text2 by remember { mutableStateOf("") }
OutlinedTextField(
value = text2,
onValueChange = { text2 = it },
textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center)
)
Spacer(modifier = Modifier.height(32.dp))
var text3 by remember { mutableStateOf("") }
BasicTextField(
value = text3,
onValueChange = { text3 = it },
textStyle = TextStyle.Default.copy(textAlign = TextAlign.Center),
decorationBox = {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(Color.LightGray)
.padding(16.dp)
) {
it()
}
}
)
Spacer(modifier = Modifier.height(32.dp))
var text4 by remember { mutableStateOf("") }
BasicTextField(
value = text4,
onValueChange = { text4 = it },
textStyle = TextStyle.Default.copy(textAlign = TextAlign.Center),
decorationBox = {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(Color.LightGray)
.padding(16.dp)
) {
it()
}
},
modifier = Modifier.fillMaxWidth()
)
}
}
0 件のコメント:
コメントを投稿