前语

Compose正式发布也有一段时间了，感觉要上手仍是得实战一波。
所以借着空闲时间，参照豆瓣榜单页面的规划，开发了几个Compose版的豆瓣榜单页面
UI作用仍是挺美观的，有喜好的同学可以点个Star:Compose仿豆瓣榜单客户端

作用图

首先看下最终的作用图

douban_compress.gif

特性

在项目中首要用到了以下几个特性，以美化UI及领会

  1. 支撑设置沉溺式状况栏及状况栏色彩
  2. 支撑水平方向android jetpack是什么翻滚，竖直方向翻滚等多种UI作用
  3. 支撑给Imappearage设置突变滤镜，以美化闪现作用
  4. 支撑标题与列表页联动
  5. 经过Paging支撑了分页加载

首APP要结束

详细源码可以直接查看，这里首要介绍一些首要功用的结束

沉溺式状况栏设置

状况栏首要是通源码编辑器过accompanist-insets及accoAPPmpanist-systemuicontroller库设置的
accompanist上供给了一系列常用的，如状况栏，权限，FlowLayout,ViewPager等Compose库
假如有时你发现根底库里没有相应的内容，可以去这里查找下

设置状况栏首要分为以下几步

  1. 设置沉溺时状况栏
  2. 获取状况栏高度
  3. 设置状况栏色彩
override fun onCreate(savedInstanceState: Bundle?) {
super.onCandroid jetpack运用reate(savedInstanceState)
// 1. 设置状况栏沉溺式
WindowCompat.set源码是什么意思DecorFitsSystemWindows(window, faandroid jetpack运用全攻略lse)
setContent {
BD_ToolTheme {
// 参与ProvideWindowInsets
ProvideWindowInsets {android下载安装
// 2. 设置状况栏色彩
rememberSystemUiControlandroid体系ler().setStatusBarColor(
Color.Transparent, darkIcons = MaterialTheme.colors.isandroid jetpack运用Light)
Coandroid jetpack运用攻略lumn {
// 3. 获取状况栏高度并设置占位
Spacer(modifier = Modifier
.statusBarsHeight()
.fillMaxWidth())
Text(text = "主页rn主页1rn主页2rn主页3")
}
}
}
}
}

经过以上办法，就可以比较简单的结束沉溺状况栏的设置

Image设置突变滤镜

豆瓣榜单页面都给Image设android jetpack是什么置了突变滤镜，以美化UI作用
其实结束起来也比较简Android+Jetpack单，给Image前添加一层突变的蒙层即可

@Composableapple
fun TopRankItem(item: HomeTopRank) {
Box(
modifier = Modifier
.size(180.dp, 220.dp)
.padding(8.dp)
.clip(RoundedCornerShape(10.dp))
) {
// 1. 图片
Image(
painter = rememberCoiandroid jetpack视频lPainter(request = item.im源码之家gUrl),
contentDescriptiapp下载on = null,
contentScale分页符怎样取消掉 = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
Column(
modifier = Modifier
.fillMaxSize()
// 突变滤镜
.backgro分页und(
brush = Brush.line源码arGradientandroid/yunos(
colors = listOf(Color(item.startColor), Color(item.endColor)),
start = Offset(0f, F源码时代loat.POSITapproachIVE_INFINITY),
end = Offset(Float.POSITIVE_INFIAndroidNITY, 0f)
)
)
.padding(8.dp)
)android电子市场 {
//内容
}
}
}

如上所示，运用Box布局，给前景设置一个从左下到右上突变的布景即可

标题与列表联动

详细作用可见上面的动图，即在列表翻滚时标题会有一个渐现渐隐作用分页符和分节符的差异
这个作用其实我们在Aandroid jetpack运用攻略pdfndroid View体系中也很常见，首要思路也很简单:

  1. 监听列表翻滚，获取列表翻滚offset
  2. 依据列表翻滚offset设置Header作用,如布景或许高度改变等
@Composable
fun R分页符怎样取消掉ankScrandroid jetpack运用全攻略een(viewModel: RankViewModel = RankViewModel()) {
val scrollState = rememberLazyListState()
Box {
// 1. 监听列表
LazyColumn(state = scrollStat分页符和分节符的差异e) {
//列表内容
}
RankHeader(scrollState)
}
}
@Composable
fun RankHeader(scrollapp下载State: LazyListState) {
val target = LocalDensity.current.run {
200.dp.toPx()
}
// 2. 依据列表偏移量计算份额
val scrollPercent: Floatandroid jetpack运用攻略 = if (scrollState.firstVisibleappreciateIte分页符mInandroid平板电脑价格dex >android下载安装 0) {
1f
} else {
scrollState.firstVisibleItemScandroid手机rollOffset / target
}
val activity = LocalContext.current as Activity
val backgroundColor = Color(0xFF7F6351)源码本钱
Column() {
Spacer(
modi分页预览fier = Modifier
.fillMaxWidth()
.statusBarsHeight()
// 3. 依据份额设置Header的alpha，以结束突变作用
.alpha(scro源码之家llPercent)
.backandroid/yunosground(backgroundColor)
)
/appear/....
}
}

如上所示，首要有三步：

  1. 监听列表
  2. 依据列表偏移量计算份额
  3. 依据份额设置Header的alpha，以结束突变作用

运用Paging分页怎样变成一页结束分页

现在Pagin3现已支撑了Compose，我们可以运用Paging轻松结束分页作用
首要分为以源码精灵下几步：

  1. 在ViewModel中设置数据源
  2. 在页面中监听Paging数据
  3. 依据加载状况设置加载更多fo分页符怎样取消掉otr状况
//1. 设置数据源
class RankViewModel : ViewModelandroid什么意思() {
val rankItems: Flow<PaAndroidgingData<RankDetail>> =
Pager(PagingConfig(pageSize = 10, prefetchDistance = 1)) {
MovieSource()
}.flow
}
@Composable
fun RankScreen(viewModandroid/yunosel: RankViewModel =android jetpack详解 RankViewModel()) {
val lazyMovieItems = viewModel.rankItems.collectAsLazyPagingIt分页预览ems()
Box {
LazyColumn(state = scrollState) {
// 2. 在页面中监听paging
items(lazyMovieItems) {
it?.letandroid什么意思 {
RankListandroid jetpack运用全攻略Item(it)
}
}
// 3. 依据pandroid下载aging状况设置加载更多footer状况等
lazyMovieItems.appl源码精灵y {
when (loadS源码精灵tate.append) {
is LoadState.Loading -> {
item { LoadingItem() }
}
}
}
}
}
}

经过以上过程，就可以比较简单方便地结束分页了

总结

项目地址

ComposeDouban
开源不易，假如项目对你有所帮忙，欢迎点赞,Star,保藏~

参考资料

Android Jetpack Compose 沉溺式/透明状况栏
Collapapproachsing Toolbar maandroid电子市场deapp下载 easy with Compose
Infinite Lists With Paging 3 in Jetpack Compose