查看全部組件 https://blog.csdn.net/b275518834/article/details/144751353

BoxWithConstraints

功能說明：它是 Jetpack Compose 中的關(guān)鍵布局組件，能夠精準(zhǔn)捕捉自身所在容器的尺寸約束信息，通過獲取最大寬度和最大高度這兩個關(guān)鍵屬性，為開發(fā)者開啟一扇通往自適應(yīng)布局世界的大門。開發(fā)者得以依據(jù)這些尺寸數(shù)據(jù)，靈動地調(diào)整內(nèi)部子組件的布局策略、樣式呈現(xiàn)乃至顯示邏輯。無論是在屏幕尺寸多變的移動設(shè)備上，還是應(yīng)對不同分辨率的桌面端，都能確保界面元素有條不紊地排列，合理利用每一寸空間，實現(xiàn)從緊湊小屏到寬敞大屏的完美適配。

示例場景：以一款閱讀類應(yīng)用為例，當(dāng)用戶在手機(jī)上打開書籍詳情頁面時，BoxWithConstraints 可以根據(jù)屏幕的實際寬度，判斷若寬度較窄，就將書籍封面圖片、書名、作者等信息縱向排列，確保文字清晰可讀，各元素不擁擠；而當(dāng)應(yīng)用運(yùn)行在平板等大屏設(shè)備上，一旦檢測到較大的 maxWidth 和 maxHeight，便可將封面圖片放大置于左側(cè)，書名、作者、簡介等信息以合適的字體和間距橫向排列在右側(cè)，充分利用大屏優(yōu)勢，提升視覺體驗。再如在社交分享界面，若 maxWidth 有限，分享按鈕與取消按鈕會緊湊排列在底部，文案區(qū)域自適應(yīng)變窄；若處于寬屏狀態(tài)，按鈕間距拉大，文案區(qū)域舒展，還可適時展示相關(guān)的熱門話題標(biāo)簽，讓分享功能更加醒目、易用，完美契合不同設(shè)備形態(tài)下的用戶需求。

package org.lxz.project.compose.demoimport androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
object BoxWithConstraintsDemo {private val elementPadding: Dp = 8.dp@Composablefun boxWithConstraintsExample() {// 使用BoxWithConstraints組件作為外層容器，使其占滿可用空間BoxWithConstraints(modifier = Modifier.fillMaxSize()) {// 獲取BoxWithConstraints組件所在容器的最大可用寬度val maxWidth = this.maxWidth// 獲取BoxWithConstraints組件所在容器的最大可用高度val maxHeight = this.maxHeight// 展示獲取到的最大寬度和最大高度信息（可以用于調(diào)試或者根據(jù)其做進(jìn)一步?jīng)Q策）Text(text = "Max Width: ${maxWidth.value} dp, Max Height: ${maxHeight.value} dp",modifier = Modifier.padding(16.dp).offset(y = 15.dp))// 根據(jù)寬高比來決定采用水平排列還是垂直排列布局方式if (maxWidth > maxHeight) {// 寬度大于高度，采用水平排列（Row）布局Row(modifier = Modifier// 讓Row組件占滿整個可用空間.fillMaxSize()// 設(shè)置子組件在水平方向上的內(nèi)邊距為16.dp，使布局看起來更美觀.padding(horizontal = 16.dp),horizontalArrangement = Arrangement.SpaceEvenly) {// 第一個子組件，寬度占比可根據(jù)需求調(diào)整，這里示例設(shè)為總寬度的1/3Text(text = "Left Text",modifier = Modifier.width(maxWidth / 3).padding(elementPadding))// 第二個子組件，占剩余寬度空間，通過weight實現(xiàn)按比例分配空間Column(modifier = Modifier// 設(shè)置權(quán)重為1f，表示占剩余的水平空間比例.weight(1f)// 讓Column組件在垂直方向上占滿可用空間.fillMaxHeight().padding(elementPadding)) {Text(text = "Top Text in Middle Column", modifier = Modifier.padding(elementPadding))Button(onClick = { /* 處理按鈕點擊事件 */ },modifier = Modifier.padding(elementPadding)) {Text(text = "Click Me", modifier = Modifier.padding(elementPadding))}Text(text = "Bottom Text in Middle Column", modifier = Modifier.padding(elementPadding))}// 第三個子組件，寬度同樣占總寬度的1/3Text(text = "Right Text",modifier = Modifier.width(maxWidth / 3).padding(elementPadding))}} else {// 高度大于寬度，采用垂直排列（Column）布局Column(modifier = Modifier// 讓Column組件占滿整個可用空間.fillMaxSize()// 設(shè)置子組件在垂直方向上的內(nèi)邊距為16.dp，使布局更美觀.padding(vertical = 16.dp),verticalArrangement = Arrangement.SpaceEvenly) {// 第一個子組件，高度占比可根據(jù)需求調(diào)整，這里示例設(shè)為總高度的1/3Text(text = "Top Text",modifier = Modifier.height(maxHeight / 3).padding(elementPadding))// 第二個子組件，占剩余高度空間，通過weight實現(xiàn)按比例分配空間Row(modifier = Modifier// 設(shè)置權(quán)重為1f，表示占剩余的垂直空間比例.weight(1f)// 讓Row組件在水平方向上占滿可用空間.fillMaxWidth().padding(elementPadding)) {Text(text = "Left Text in Middle Row", modifier = Modifier.padding(elementPadding))Button(onClick = { /* 處理按鈕點擊事件 */ },modifier = Modifier.padding(elementPadding)) {Text(text = "Click Me", modifier = Modifier.padding(elementPadding))}Text(text = "Right Text in Middle Row", modifier = Modifier.padding(elementPadding))}// 第三個子組件，高度同樣占總高度的1/3Text(text = "Bottom Text",modifier = Modifier.height(maxHeight / 3).padding(elementPadding))}}}}
}

運(yùn)行效果

1. 整體布局結(jié)構(gòu)：
   外層使用?BoxWithConstraints?組件作為基礎(chǔ)容器，通過?Modifier.fillMaxSize?使其占滿整個可用空間，以便能獲取到最外層的尺寸約束信息（maxWidth?和?maxHeight）。

2. 獲取并利用尺寸約束信息：
   首先獲取了?maxWidth?和?maxHeight，并通過一個簡單的?Text?組件展示了這兩個尺寸值（同時利用?Modifier.offset?對其在垂直方向做了一點偏移，使其布局更美觀）。然后依據(jù)?maxWidth?和?maxHeight?的大小比較結(jié)果，選擇不同的內(nèi)部布局方式。

3. 不同布局方式下的子組件處理：

   • 水平排列（Row?布局）情況：
     • 當(dāng)寬度大于高度時，使用?Row?組件水平排列子組件，通過?horizontalArrangement = Arrangement.SpaceEvenly?讓子組件在水平方向均勻分布，同時利用?Modifier.width?為部分子組件設(shè)置特定的寬度占比（如設(shè)置第一個和第三個?Text?組件寬度為總寬度的?1/3），中間的?Column?組件通過?Modifier.weight(1f)?占剩余的寬度空間，并且在每個子組件上都添加了?elementPadding?的內(nèi)邊距，保證元素之間有合適間距，避免堆疊。
   • 垂直排列（Column?布局）情況：
     • 類似地，當(dāng)高度大于寬度時，采用?Column?組件垂直排列子組件，通過?verticalArrangement = Arrangement.SpaceEvenly?使子組件在垂直方向均勻分布，利用?Modifier.height?設(shè)定部分子組件的高度占比（如設(shè)置第一個和第三個?Text?組件高度為總高度的?1/3），中間的?Row?組件通過?Modifier.weight(1f)?占剩余的高度空間，同樣為每個子組件添加?elementPadding?的內(nèi)邊距確保布局清晰。