compose 布局间距设置

测试下Row容器先调用background再调用paddingpackage com.example.testcompose1 import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding 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.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.testcompose1.ui.theme.TestCompose1Theme import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.ui.Alignment import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() // 让应用内容绘制到系统栏状态栏、导航栏后面实现全屏显示效果 setContent { // TestCompose1Theme { // // modifier用于装饰和配置组件,类似于 CSS 的样式 布局属性。 fillMaxSize 填充父布局 // Scaffold(modifier Modifier.fillMaxSize()) { innerPadding - // Greeting( // name Android, // modifier Modifier.padding(innerPadding) // ) // } // } demoLayout1(Message(Android, Jetpack Compose)) } } } data class Message(val author: String, val body: String) Composable fun demoLayout1(msg: Message) { Row(modifier Modifier.fillMaxWidth() // 宽度占满父容器 .background(color Color(0xFFCCCCCC)) .padding(all 20.dp) ,verticalAlignment Alignment.CenterVertically // 内容垂直居中 ) { Image( painter painterResource(R.mipmap.haha), contentDescription a picture, contentScale ContentScale.Crop, // 填满并裁剪 modifier Modifier .size(80.dp) .clip(shape RectangleShape) ) // 空白 Spacer(modifier Modifier.width(10.dp)) Column { Text(text msg.author) Spacer(modifier Modifier.height(4.dp)) Text(text msg.body) } } } Preview Composable fun PreviewDemoLayout1() { // 可以单独运行预览 demoLayout1( msg Message(Lexi, Hey, take a look at Jetpack Compose, its great!) ) } //Composable //fun Greeting(name: String, modifier: Modifier Modifier) { // Text( // text Hello $name!, // modifier modifier // ) //} // //Preview(showBackground true) //Composable //fun GreetingPreview() { // TestCompose1Theme { // Greeting(Android) // } //}预览好像没啥效果。再测试下调整顺便Row容器先设置padding 再设置background预览可以看出先调用padding再设置background padding像是外边距。但是查了资料compose没有外边距的概念。这个顺序不同只是背景绘制区域不同而已。把Row容器加个点击事件测试下点击灰色背景之外的区域能不能响应。关键代码如下预览点击图片以及灰色区域能响应点击上面或左右白色区域不响应。再调整下顺序先设置点击事件:点击左右间距以及上面的间距部分也会响应点击事件。把padding调大一些。 点击前点击的时候会自动变色所以会变色的整个区域都是Row容器的范围触摸能感应到。所以设置点击事件和设置背景色一样 如果在设置padding之后 起作用的区域会变小也就是在去掉padding的剩余区域起作用。ok. 结论 Modifier的链式调用函数是和调用顺序有关后面调用的函数是在前面函数的效果基础上。