我正在開發一個LazyColumn用于顯示玩家串列的 Jetpack Compose 應用程式，并且我正在嘗試為每個Card代表玩家的影像背景（在可組合函式 ProfileCard 中）添加影像背景。
我正在使用一個Box物件來保存每個條目的內容，并將一個Image物件宣告為其第一個元素。據我了解，Box物件中的所有元素都是“堆疊”的，因此稍后宣告的元素（進一步向下）在視覺上顯示在先前宣告的元素之上（進一步向上），所以我不確定為什么影像背景 - 這是首先宣告的- 呈現在我的元素之上，該元素在ProfileContent可組合的Text內部進一步宣告：
Line#93
這是禁用深色蜂窩影像元素的螢屏截圖：
在這里，啟用了深色蜂窩影像元素：
不知何故，背景影像在播放器圖示后面被正確渲染，但它被渲染在元素之上Text——盡管圖示和文本都在同一個Row物件中宣告。任何人都知道如何解決此問題并強制將背景影像呈現在兩個元素后面？
uj5u.com熱心網友回復：
它不會在 頂部渲染TextField，它看起來像它在它上面，因為TextField's背景與它Image后面的混合，所以它看起來像是重疊它們。
我嘗試實作您的代碼并將其更改TextField backgroundColor 為Color.LightGray.
Card(
modifier = Modifier
.fillMaxWidth()
.size(90.dp)
.padding(top = 6.dp)
.wrapContentHeight(align = Alignment.Top),
shape = CutCornerShape(topEnd = 20.dp),
elevation = 8.dp
) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Image(
painter = painterResource(id = R.drawable.honeycomb),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.matchParentSize()
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) {
// ProfilePicture() composable
Box(
modifier = Modifier
.size(80.dp)
.clip(CircleShape)
.background(Color.Red)
)
Spacer(modifier = Modifier.size(size = 16.dp))
// ProfileContent() composable
Box(
modifier = Modifier
.fillMaxWidth()
.padding(end = 16.dp)
) {
TextField(
value = "Text",
onValueChange = {},
label = { Text("Player Name")},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.LightGray
)
)
}
}
}
}
編輯：重構和更正發布的解決方案描述從Text到TextField
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/515009.html
標籤：安卓安卓布局android-jetpack-composeandroid-jetpack-compose-布局
上一篇：使ConstraintLayout在Android中回應
下一篇：無法訪問“RowScopeInstance”：它在“androidx.compose.foundation.layout”中是內部的