Jetpack组合-修饰符顺序

Question

文档说修饰符是从左侧应用的。但从这个例子来看，它们看起来像是从右边应用的：首先是边框，然后是填充，因为文本和边框之间没有空格

Text("Hi there!", Modifier.padding(10.dp).border(2.dp, Color.Magenta))

Answer 1

在这种情况下，第一个填充就像元素的边距。

比较一下这些组件，你就会发现不同之处。

@Composable
fun Example() {
    // Default
    Box(modifier = Modifier.background(Color.Cyan), alignment = Alignment.Center){
        Text("Hi there!", Modifier.border(2.dp, Color.Magenta))
    }
    Divider()
    // 10dp margin
    Box(modifier = Modifier.background(Color.Cyan), alignment = Alignment.Center){
        Text("Hi there!", Modifier.padding(10.dp).border(2.dp, Color.Magenta))
    }
    Divider()
    // 10dp margin and 10dp padding
    Box(modifier = Modifier.background(Color.Cyan), alignment = Alignment.Center){
        Text("Hi there!", Modifier.padding(10.dp).border(2.dp, Color.Magenta).padding(10.dp))
    }
}

Answer 2

• 在Android Compose中，生成的图像是从外层向中心的Composable构建的。这意味着第一个定义的绿色边框是外边框，最后一个定义的红色边框是内边框。这非常令人困惑，因为代码中最接近Text Composable的绿色修饰符在结果中离它最远。
• 这与SwiftUI形成鲜明对比，其中修饰符在代码和生成图像中以相同的顺序出现。最接近代码中的Composable的修饰符在生成图像中也最接近它。
• 如果您想想象生成的图像是从Composable定位的中心构建的（如在SwiftUI中），那么修饰符将以与给出它们的顺序相反的顺序应用（从底部向上）。
• 因此，如果您有带有两个边框修饰符的Text Composable
  • 距离代码中可组合文本最远的边框修饰符（底部的红色）
  • 将最接近结果图像中的文本可组合
  • 将 .border（2.dp， Color.Green） 应用于最外层
  • 向内应用 .padding（50.dp）
  • 将 .border（2.dp， Color.Red） 应用于最里面的图层

  package com.example.myapplication
  
  import android.os.Bundle
  import androidx.appcompat.app.AppCompatActivity
  import androidx.compose.foundation.*
  import androidx.compose.foundation.layout.padding
  import androidx.compose.ui.Modifier
  import androidx.compose.ui.graphics.Color
  import androidx.compose.ui.platform.setContent
  import androidx.compose.ui.unit.dp
  
  class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContent {
        Text("Hi there!",
          Modifier
            .border(2.dp, Color.Green)
            .padding(50.dp)
            .border(2.dp, Color.Red)
        )
      }
    }
  }
  

  https://imgs.xnip.cn/cj/n/7/6f4fd58a-e0d9-4571-921e-26c69ad0e503.png" width="100%" height="100%" />

Answer 3

Jetpack Compose codelab中有布局，在引擎盖步骤下包含布局修改器，解释修改器顺序，请参阅“顺序事项”部分。

当修饰符应用于它们从早修改到晚修改的可组合时，链接修饰符很重要，这意味着左侧修饰符的测量和布局将影响右侧的修饰符。可组合的最终大小取决于作为参数传递的所有修饰符。首先，修饰符将从左到右更新约束，然后从右到左返回大小。

为了更好地理解它，我建议弄清楚布局在Compose中是如何工作的。简而言之，padding()是一个LayoutModifer，它接受一些约束，根据这些约束的投影来测量它的孩子的大小，并将孩子放在某个坐标上。

让我们看一个例子：

Box(
  modifier = Modifier
    .border(1.dp, Color.Red)
    .size(32.dp)
    .padding(8.dp)
    .border(1.dp, Color.Blue)
)

结果是:

但是让我们交换<代码>。size()和< code >。padding()

Box(
  modifier = Modifier
    .border(1.dp, Color.Red)
    .padding(8.dp)
    .size(32.dp)
    .border(1.dp, Color.Blue)
)

现在我们有了不同的结果：

我希望这个例子能帮助你理解修饰符是如何应用的。

可以预期红色边框应该是最接近框的，因为它是先添加的，所以顺序可能看起来颠倒了，但这样的顺序也有好处。让我们看看这个可组合的：

@Composable
fun MyFancyButton(modifier: Modifier = Modifier) {
  Text(
    text = "Ok",
    modifier = modifier
      .clickable(onClick = { /*do something*/ })
      .background(Color.Blue, RoundedCornerShape(4.dp))
      .padding(8.dp)
  )
}

只需将修饰符移动到参数中，可组合性就允许其父级添加额外的修饰符，例如额外的边距。因为最后添加的修改器最靠近按钮，所以边框和内部填充不会受到影响。