下面的代码生成了这个屏幕截图。该代码是Android Studio Flamingo生成的默认应用程序的略微修改版本。
我对这段代码的期望是边框出现在文本周围,而不是背景周围。我还希望文本背景与应用程序背景的颜色不同。
应该如何修改此代码以产生预期的结果?
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BasicCodelabTheme {
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Surface(color = MaterialTheme.colorScheme.primary) {
val mods = Modifier.padding(24.dp).border(2.dp, Color.Cyan, RoundedCornerShape(30))
Text(text = "Hello $name!", modifier = mods)
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
BasicCodelabTheme {
Greeting("Android")
}
}
1条答案
按热度按时间kkih6yb81#
你可以通过做这两个改变来解决这个问题:
wrapContentSize()
将避免导致此表面占据整个屏幕;padding
顺序更改为首先应用。Compose从上到下绘制元素,因此在本例中,我们将首先应用padding,然后根据给定的padding
绘制边框;