Jetpack Compose-修饰符顺序 [英] Jetpack Compose - Order of Modifiers

问题描述

文档说，修饰符是从左侧开始应用的.但是从此示例看来，它们似乎是从右开始应用的:首先是边框，然后是填充，因为文本和边框之间没有空格

Documentation says that Modifiers are applied from the left. But from this example it looks like they are applied from the right: First border and then padding because there is no space between text and border

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

推荐答案

• 在Android Compose中，生成的图像是从外层向中心的Composable构建的.这意味着第一个定义的绿色边框是外部边界，最后一个定义的红色边框是内部边界.这非常令人困惑，因为在代码中最接近代码中文本可组合的文本"的绿色修饰符距离它最远.
• 这与SwiftUI相反，在SwiftUI中，修饰符在代码和生成的图像中均以相同的顺序出现.在代码中最接近Composable的修饰符在生成的图像中也最接近它.
• 如果您想想象生成的Image是从Composable所处的中心构建的(例如，在SwiftUI中)，那么修饰符将以与给出的相反顺序(从下往上)应用.
• 因此，如果您的文字可与两个边框修饰符一起使用
  • 距离代码中可撰写文本最远的边框修饰符(底部红色).
  • 将最接近结果图像中的可组合文字"
  • 将.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)
        )
      }
    }
  }
  

  这篇关于Jetpack Compose-修饰符顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！