技術標籤：Jetpack-ComposeJetpackComposeBoxLayout

Jetpack Compose - Box

• • 0、介紹
  • 1、屬性一覽
  • 2、使用示例
  • 3、版本更新
  • 4、未解決問題

Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！

0、介紹

針對Box佈局，官方介紹如下：

可以和內容組合的佈局，Box會根據傳入的限制（我理解為：Box的Modifier修飾符屬性以及content包含的屬性）自行調整大小以適應內容。
如果需要指定content的對齊方式，請使用Alignment。
如果Box中包含多個佈局子級時，這些子級將按照組成順序 “堆疊” 起來（所以，這就類似FrameLayout佈局了）。

1、屬性一覽

【目前基於alpha08版本的屬性】首先請看Box的兩個函式：

@Composable fun Box(modifier: Modifier): Unit

@Composable inline fun Box(
    modifier: Modifier = Modifier, 
    contentAlignment: Alignment = Alignment.TopStart, 
    content: BoxScope.() -> Unit
): Unit

屬性引數含義：

2、使用示例

我們首先宣告一個 360*200 背景為紅色的Box，然後定義該Box中內容的對齊屬性為 contentAlignment = Alignment.Center居中對齊 ，然後我們在Box中定義它的內容為另一個Box1，Box1的背景為黑色，寬高屬性為 fillMaxSize，這個屬性意思是“全部填充父容器”，它有一個預設引數表示所佔父容器的百分比，所以fillMaxSize(0.5f) 的意思就是：內容Box1的寬高是父Box寬高的一半。Box2的就不具體解釋了，程式碼如下：

@Composable
fun BoxDemo() {
    Box(
        modifier = Modifier
            .width(360.dp)
            .height(200.dp)
            .background(Color.Red),
        contentAlignment = Alignment.Center
    ) {
        //子Box1
        Box(
            modifier = Modifier
                .fillMaxSize(0.5f)
                .background(color = Color.Black)
        )

        //子Box2
        Box(
            modifier = Modifier
                .fillMaxSize(0.2f)
                .background(color = Color.White)
        )
    }
}

所以實現效果如下所示：

3、版本更新

• 暫無

4、未解決問題

其實在之前的專案中使用FrameLayout的情況就很少，FrameLayout佈局的侷限性在Box佈局中也會有，比如按照百分比佈局控制元件，所以我們後面需要使用更強大的ConstraintLayout。佈局簡單的情況使用Box佈局就可以啦，後面遇到Box佈局的小技巧再繼續完善文件。