从零到一：用Jetpack Compose仿写一个‘小红书’首页（含骨架屏、宫格与滑动删除）

从零构建小红书风格首页Jetpack Compose实战全解析在移动应用开发领域UI构建效率与用户体验的平衡一直是开发者关注的焦点。Jetpack Compose作为Android官方推荐的现代UI工具包正在彻底改变我们构建原生界面的方式。本文将带您深入实战通过复现小红书首页的核心功能模块掌握Compose在复杂场景下的高级应用技巧。1. 项目架构与基础搭建1.1 初始化Compose工程首先创建一个新的Android Studio项目确保配置了最新的Compose依赖。在build.gradle文件中添加以下关键依赖dependencies { implementation androidx.compose.ui:ui:1.4.0 implementation androidx.compose.material:material:1.4.0 implementation androidx.compose.ui:ui-tooling-preview:1.4.0 implementation androidx.activity:activity-compose:1.7.0 implementation androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1 implementation androidx.paging:paging-compose:1.0.0-alpha18 implementation com.google.accompanist:accompanist-swiperefresh:0.28.0 }1.2 状态管理设计小红书首页涉及多种交互状态推荐采用分层状态管理架构class HomeViewModel : ViewModel() { private val _uiState mutableStateOf(HomeUiState()) val uiState: StateHomeUiState _uiState fun loadInitialData() { /*...*/ } fun deleteItem(itemId: String) { /*...*/ } } data class HomeUiState( val items: ListFeedItem emptyList(), val isLoading: Boolean false, val error: String? null )2. 瀑布流宫格布局实现2.1 LazyVerticalGrid深度配置小红书特色的瀑布流布局可以通过LazyVerticalGrid实现关键在于动态计算每个item的高度Composable fun FeedGrid( items: ListFeedItem, modifier: Modifier Modifier ) { LazyVerticalGrid( columns GridCells.Adaptive(minSize 180.dp), modifier modifier, contentPadding PaddingValues(8.dp), horizontalArrangement Arrangement.spacedBy(8.dp), verticalArrangement Arrangement.spacedBy(12.dp) ) { items(items) { item - FeedGridItem( item item, modifier Modifier .fillMaxWidth() .heightIn(min 200.dp, max 400.dp) ) } } }2.2 动态高度计算技巧实现真正的瀑布流效果需要根据内容动态调整高度Composable fun FeedGridItem( item: FeedItem, modifier: Modifier Modifier ) { val imageHeight remember(item.imageRatio) { (LocalConfiguration.current.screenWidthDp * 0.5 * item.imageRatio).dp } Card( modifier modifier, elevation 4.dp, shape RoundedCornerShape(12.dp) ) { Column { AsyncImage( model item.imageUrl, contentDescription null, modifier Modifier .fillMaxWidth() .height(imageHeight) ) // 其他内容元素... } } }3. 分页加载与状态管理3.1 Paging3集成实践实现无限滚动需要结合Paging3库class FeedPagingSource( private val apiService: ApiService ) : PagingSourceInt, FeedItem() { override suspend fun load(params: LoadParamsInt): LoadResultInt, FeedItem { return try { val page params.key ?: 1 val response apiService.getFeedList(page) LoadResult.Page( data response.items, prevKey if (page 1) null else page - 1, nextKey if (response.isLastPage) null else page 1 ) } catch (e: Exception) { LoadResult.Error(e) } } }3.2 加载状态UI处理优雅处理各种加载状态提升用户体验Composable fun FeedScreen(viewModel: HomeViewModel viewModel()) { val lazyPagingItems viewModel.feedItems.collectAsLazyPagingItems() SwipeRefresh( state rememberSwipeRefreshState( lazyPagingItems.loadState.refresh is LoadState.Loading ), onRefresh { lazyPagingItems.refresh() } ) { LazyVerticalGrid(...) { items(lazyPagingItems) { item - item?.let { FeedItemCard(it) } } when { lazyPagingItems.loadState.append is LoadState.Loading - { item { LoadingIndicator() } } lazyPagingItems.loadState.append is LoadState.Error - { item { RetryButton { lazyPagingItems.retry() } } } } } } }4. 高级交互实现4.1 滑动删除手势处理实现类似小红书的滑动删除效果需要自定义手势检测Composable fun SwipeToDeleteContainer( onDismiss: () - Unit, content: Composable () - Unit ) { val swipeState rememberSwipeState() val swipeThreshold LocalConfiguration.current.screenWidthDp.dp * 0.3f Box( modifier Modifier .swipeable( state swipeState, anchors mapOf( 0f to SwipeState.Default, swipeThreshold.value to SwipeState.Dismissed ), thresholds { _, _ - FractionalThreshold(0.5f) }, orientation Orientation.Horizontal ) .offset { IntOffset(swipeState.offset.value.roundToInt(), 0) } ) { Row( modifier Modifier.fillMaxSize(), horizontalArrangement Arrangement.SpaceBetween ) { content() DeleteBackground(onClick onDismiss) } } }4.2 骨架屏实现技巧数据加载时的骨架屏能显著提升感知速度Composable fun FeedItemSkeleton() { val shimmerColors listOf( Color.LightGray.copy(alpha 0.6f), Color.LightGray.copy(alpha 0.2f), Color.LightGray.copy(alpha 0.6f) ) val transition rememberInfiniteTransition() val translateAnim transition.animateFloat( initialValue 0f, targetValue 1000f, animationSpec infiniteRepeatable( animation tween( durationMillis 1000, easing FastOutSlowInEasing ), repeatMode RepeatMode.Restart ) ) val brush Brush.linearGradient( colors shimmerColors, start Offset(translateAnim.value, translateAnim.value), end Offset(translateAnim.value 500f, translateAnim.value 500f) ) Column( modifier Modifier .fillMaxWidth() .padding(8.dp) ) { Box( modifier Modifier .fillMaxWidth() .aspectRatio(1f) .background(brush) ) Spacer(modifier Modifier.height(8.dp)) Box( modifier Modifier .fillMaxWidth(0.8f) .height(16.dp) .background(brush) ) } }5. 性能优化与调试5.1 重组优化策略避免不必要的重组是保证流畅体验的关键Composable fun FeedItemCard( item: FeedItem, modifier: Modifier Modifier ) { val interactionSource remember { MutableInteractionSource() } Card( modifier modifier .clickable( interactionSource interactionSource, indication null ) { /* 处理点击 */ }, elevation animateDpAsState( if (interactionSource.collectIsPressedAsState().value) 8.dp else 2.dp ).value ) { // 使用derivedStateOf优化派生状态计算 val imageAspectRatio by remember(item.imageWidth, item.imageHeight) { derivedStateOf { item.imageWidth.toFloat() / item.imageHeight.toFloat() } } // 内容布局... } }5.2 内存管理技巧大型列表需要特别注意内存使用LazyVerticalGrid( // ... content { items( items items, key { it.id } // 关键设置唯一key ) { item - // 使用AsyncImage的稳定版本 AsyncImage( model ImageRequest.Builder(LocalContext.current) .data(item.imageUrl) .crossfade(true) .size(Size.ORIGINAL) .memoryCachePolicy(CachePolicy.ENABLED) .diskCachePolicy(CachePolicy.ENABLED) .build(), contentDescription null, modifier Modifier.fillMaxWidth(), contentScale ContentScale.Crop ) } } )在实现过程中我发现动态高度的计算对瀑布流效果至关重要而正确的缓存策略可以显著提升图片加载性能。对于滑动删除交互手势检测的灵敏度需要根据设备尺寸进行动态调整才能获得最佳用户体验。