Android Jetpack Compose嵌套Surface：如何修改代码实现预期UI效果

要实现边框环绕Text、Text背景与应用背景不同的效果，只需调整Greeting组件的结构和Modifier顺序，具体修改如下：

修改后的完整代码 #

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参数，继承应用默认背景色
    Surface {
        val mods = Modifier
            .padding(24.dp) // 带边框的Text组件与外部的间距
            .background(MaterialTheme.colorScheme.primary) // Text的独立背景色，与应用背景区分
            .border(2.dp, Color.Cyan, RoundedCornerShape(30)) // 环绕背景的边框
            .padding(16.dp) // 文字与边框/背景的内边距，避免文字紧贴边框
        Text(text = "Hello $name!", modifier = mods)
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    BasicCodelabTheme {
        Greeting("Android")
    }
}

核心修改点 #

1. 移除Greeting内Surface的color属性
   原代码中该Surface会把整个区域设为primary色，导致看起来是全局背景而非Text的独立背景。移除后，该区域将继承应用的默认背景色。

2. 调整Modifier的执行顺序

   • 先设置background：给Text添加独立的背景色，与应用背景形成区分。
   • 再设置border：在背景色外层绘制环绕边框（modifier按顺序执行，border会绘制在background之上，实现边框包裹背景的效果）。
   • 前后添加padding：分别控制组件与外部的间距、文字与边框的间距，优化视觉效果。

内容的提问来源于stack exchange，提问作者Bungles