這一節(jié)主要了解一下Compose中onVisibilityChanged它是用來(lái)監(jiān)聽組件可見狀態(tài)變化簡(jiǎn)單總結(jié)如下:APIonVisibilityChanged:拿到組件與視口的窗口坐標(biāo)矩形求矩形交集計(jì)算重疊面積占組件自身總面積的比值minDurationMs:可見狀態(tài)持續(xù)防抖時(shí)間minFractionVisible:最小可見面積占比閾值默認(rèn) 1.0viewportBounds:自定義視口容器可為 null。callback:可見狀態(tài)回調(diào)函數(shù)場(chǎng)景:1 列表曝光統(tǒng)計(jì)2 組件自動(dòng)播放控制3 動(dòng)畫觸發(fā)栗子:mport android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.onVisibilityChanged import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp Composable fun VisiblitySample() { val list (1..15).map { Item $it } LazyColumn(modifier Modifier.fillMaxSize()) { items(list) { itemText - var logStr 未曝光 Box(modifier Modifier .fillMaxWidth() .height(120.dp) .padding(8.dp) .onVisibilityChanged( minDurationMs 0, minFractionVisible 0.5f ) { isVisible - logStr if (isVisible) 已曝光 $itemText else 離開視口 $itemText println(logStr) } ) { Text( text $itemText \n 50%可見觸發(fā), modifier Modifier.padding(12.dp), textAlign TextAlign.Center ) } } } }import android.util.Log import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material3.Card import androidx.compose.material3.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.onVisibilityChanged import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp data class Product( val id: String, val name: String, val price: Double ) Composable fun FeedSample() { val products remember { List(30) { Product(id SKU_$it, name 高級(jí)商品 $it, price 99.9 * it) } } val exposedMap remember { mutableStateMapOfString, Boolean() } LazyColumn( modifier Modifier.fillMaxSize(), contentPadding PaddingValues(16.dp), verticalArrangement Arrangement.spacedBy(12.dp) ) { items( items products, key { it.id } ) { product - val isAlreadyExposed exposedMap[product.id] true ProductCard( product product, isExposed isAlreadyExposed, onExpose { exposedMap[product.id] true Log.d(EcommerceFeed, [埋點(diǎn)上報(bào)] 商品有效曝光: ${product.name} (價(jià)格: ${product.price})) } ) } } } Composable fun ProductCard( product: Product, isExposed: Boolean, onExpose: () - Unit ) { Card( modifier Modifier .fillMaxWidth() .height(120.dp) .onVisibilityChanged( minDurationMs 500, minFractionVisible 0.6f ) { isVisible - if (isVisible !isExposed) { onExpose() } } ) { Box(modifier Modifier.fillMaxSize().padding(16.dp)) { Column(modifier Modifier.align(Alignment.CenterStart)) { Text(text product.name, fontSize 18.sp) Text(text ￥ ${product.price}, fontSize 14.sp, color Color.Red) } if (isExposed) { Text( text 已曝光, modifier Modifier.align(Alignment.CenterEnd), color Color.Gray ) } } } }