Compose中常用UI工具包

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

Glide-Compose

Google官方给我们推荐Compose的图片加载库是使用的Coli,但是在我们使用的过程中，我们发现Coli在图片加载完成时，进场动画非常生硬,所以就在换到glide的Compose版本

    implementation "com.google.accompanist:accompanist-glide:0.12.0"

使用方式如下

@OptIn(ExperimentalCoilApi::class)
@Composable
fun UrlImage(
    modifier: Modifier = Modifier,
    url: Any? = null,
    @DrawableRes resId:Int? = null,
    contentScale: ContentScale = ContentScale.Crop,
) {

    val painter = if (resId != null)
        painterResource(id = resId)
    else {
        rememberGlidePainter(request = url,fadeIn = true)
    }

    Image(
        painter = painter,
        contentDescription = null,
        modifier = modifier,
        contentScale = contentScale,
    )
}

FlowLayout

在我们编写类似于搜索历史记录的这种组件时我们发现前端存在的一种Flex布局可以很好的满足我们的需求，但是由于应用Compose还是在早期alpha版本，Compose官方并没有在Compose组件包中存在这种布局，但是在Compose的扩展库中新增了这种布局

• 依赖导入

repositories {
    mavenCentral() 
} 
dependencies { 
    implementation "com.google.accompanist:accompanist-flowlayout:<version>"
}

• 使用

Composable
fun FlowColumn(
    modifier: Modifier = Modifier,
    mainAxisSize: SizeMode = SizeMode.Wrap,
    mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start,
    mainAxisSpacing: Dp = 0.dp,
    crossAxisAlignment: FlowCrossAxisAlignment= FlowCrossAxisAlignment.Start,
    crossAxisSpacing: Dp = 0.dp, 
    lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment,
    content: @Composable () -> Unit)

还有FlowRow可以使用

Pager

依赖项

implementation("com.google.accompanist:accompanist-pager:0.15.0")
implementation("com.google.accompanist:accompanist-pager-indicators:0.15.0")

使用

HorizontalPager(
    state = pagerState, modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.Start
) { innerPager ->
    //Pager显示的数据
    val moduleData = pageGoods.toList()[innerPager].data.splitList(12)[0]
    GridLayout(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 31.wdp, vertical = 21.hdp),
        contentPadding = PaddingValues(horizontal = 33.wdp, vertical = 21.hdp),
        list = moduleData,
        columns = 3,
        content = { data ->
           Item(data = data)
        }
    )
}
//Pager底部的指示器，依靠pagerState进行关联
HorizontalPagerIndicator(
    pagerState = pagerState,
    modifier = Modifier
        .align(Alignment.BottomCenter)
        .padding(bottom = 16.hdp),
    activeColor = green32BFCE,
    inactiveColor = white,
    spacing = 9.wdp,
)

ViewModel

刚开始我们接触Compose的时候会发现，Compose在MVVM这种架构之下，特别依赖于ViewModel进行数据的共享存储，而ViewModel通过在Activity中从创建好之后使用参数的形式显示传递，后来Compose官方提供了一种在Compose中使用依赖注入的形式进行ViewModel的获取

依赖导入

implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1")

使用方式

@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) 
    /* ... */
}

通过使用viewModel()可组合项函数进行依赖ViewModel的获取。但是我们的ViewModel必须使用Hilt注解进行依赖项注入

@HiltViewModel
class MyViewModel @Inject constructor(
    private val savedStateHandle: SavedStateHandle,
    private val repository: ExampleRepository
) : ViewModel() { /* ... */ }