英文:
Text will overlap if I use a theme in jetpack compose
问题
The issue you're experiencing with text overlapping in Jetpack Compose UI is likely due to the custom theme you've defined in your code. It seems to be altering the status bar color and appearance, which might be causing layout issues. To fix this bug and prevent text overlap, you can try the following steps:
-
Remove the custom theme, "CalaulatorTheme," from your code and use the default theme provided by Jetpack Compose.
-
Test your UI without the custom theme to see if the text displays correctly. If it does, then the issue is likely related to the custom theme you've implemented.
-
If you still want to customize the theme, consider making adjustments to it gradually and testing the UI after each change to identify which part of the theme is causing the overlap issue.
-
Ensure that your theme modifications do not interfere with the layout of the Text composable inside your Column.
By following these steps, you should be able to identify and resolve the text overlap issue in your Jetpack Compose UI.
英文:
I write an app with jetpack compose UI. that is only a Text compose in my screen. But I found that the text will overlap if I use a default theme. How can I Solve this problem？
The UI is like this :
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CalaulatorTheme {
// A surface container using the 'background' color from the theme
Box(modifier = Modifier.fillMaxSize().background(MediumGray).padding(16.dp)) {
Column(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Text(
text = "12345678901233445568256",
textAlign = TextAlign.End,
modifier = Modifier
.fillMaxSize()
.background(Color.Magenta)
.padding(vertical = 8.dp),
fontWeight = FontWeight.Light,
fontSize = 60.sp,
color = Color.White,
maxLines = 2
)
}
}
}
}
}
}
the default Theme is like this:
@Composable
fun CalaulatorTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
val view = LocalView.current
if (!view.isInEditMode) {
SideEffect {
(view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
}
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content
)
}
But the result is like this:
Why do the texts overlap with each other？ How should I fix this bug？
if I remove the "CalaulatorTheme", the text display normal.
答案1
得分: 2
Replace your fontSize = 60.sp with style = TextStyle(fontSize = 60.sp).
英文:
Just replace your fontSize = 60.sp with style = TextStyle(fontSize = 60.sp)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论