Jetpack Compose の BasicTextField の文字位置を中央揃え (centering) にする

TextAlign.Center を指定した TextStyle を渡します。

view plainprint?

1. BasicTextField(  
2.     ...,  
3.     textStyle = TextStyle.Default.copy(textAlign = TextAlign.Center),  
4.     ...  
5. )  
6.     
7. BasicTextField(  
8.     ...,  
9.     textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),  
10.     ...  
11. )  
12.   
13. BasicTextField(  
14.     ...,  
15.     textStyle = MaterialTheme.typography.body1.copy(textAlign = TextAlign.Center),  
16.     ...  
17. )  

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 の中で中央揃えになってしまいます。そのうち設定できるようになるのかもしれません。

view plainprint?

1. @Composable  
2. fun CenteringTextField() {  
3.     Column(  
4.         modifier = Modifier  
5.             .fillMaxSize()  
6.             .padding(16.dp)  
7.     ) {  
8.         var text1 by remember { mutableStateOf("") }  
9.         TextField(  
10.             value = text1,  
11.             onValueChange = { text1 = it },  
12.             textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),  
13.         )  
14.   
15.         Spacer(modifier = Modifier.height(32.dp))  
16.   
17.         var text2 by remember { mutableStateOf("") }  
18.         OutlinedTextField(  
19.             value = text2,  
20.             onValueChange = { text2 = it },  
21.             textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center)  
22.         )  
23.   
24.         Spacer(modifier = Modifier.height(32.dp))  
25.   
26.         var text3 by remember { mutableStateOf("") }  
27.         BasicTextField(  
28.             value = text3,  
29.             onValueChange = { text3 = it },  
30.             textStyle = TextStyle.Default.copy(textAlign = TextAlign.Center),  
31.             decorationBox = {  
32.                 Box(  
33.                     contentAlignment = Alignment.Center,  
34.                     modifier = Modifier  
35.                         .background(Color.LightGray)  
36.                         .padding(16.dp)  
37.                 ) {  
38.                     it()  
39.                 }  
40.             }  
41.         )  
42.   
43.         Spacer(modifier = Modifier.height(32.dp))  
44.   
45.         var text4 by remember { mutableStateOf("") }  
46.         BasicTextField(  
47.             value = text4,  
48.             onValueChange = { text4 = it },  
49.             textStyle = TextStyle.Default.copy(textAlign = TextAlign.Center),  
50.             decorationBox = {  
51.                 Box(  
52.                     contentAlignment = Alignment.Center,  
53.                     modifier = Modifier  
54.                         .background(Color.LightGray)  
55.                         .padding(16.dp)  
56.                 ) {  
57.                     it()  
58.                 }  
59.             },  
60.             modifier = Modifier.fillMaxWidth()  
61.         )  
62.     }  
63. }  

@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() ) } }