一个非常基本的代码是:
只是一个简单的hello world,带有一些样式和居中对齐的文本。文本在预览中居中对齐,但在模拟器或真实的Android设备中不对齐。
下面是完整的代码:
package com.example.jetpackcomposetutorial
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.jetpackcomposetutorial.ui.theme.JetpackComposeTutorialTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SayHello()
}
}
}
@Preview(showSystemUi = true)
@Composable
fun SayHello(name:String = "World"){
Text(
text = "Hello $name",
fontStyle = FontStyle.Italic,
fontWeight = FontWeight.ExtraBold,
color = Color.Red,
textAlign = TextAlign.Center,
fontSize = 30.sp
)
}
1条答案
按热度按时间2ekbmq321#
我认为这是
Preview
中的一个问题,因为它不应该显示在中间,因为你没有为文本或大小指定任何容器。要清楚你说
TextAlign.Center
并不意味着文本将在屏幕上居中,而是意味着文本将在宽度为Text
居中。像这样的简单修复应该有效:
因为我们现在添加了
Modifier.fillMaxWidth()
,这意味着文本将采用最大宽度,现在TextAlign.Center
将采取行动,因为它有一堆可用的空间,所以它将把任何文本给它的中间。