写在最前面,本篇文章只是挑了大部分功能写出来，当然里面也有我们针对的部分知识点扩展介绍.
更多使用介绍可以去: Accompanist官方原文的,请看如下链接地址👇👇
google.github.io/accompanist…
官方文档的原文介绍：
Accompanist is a group of libraries which aim to supplement Jetpack Compose with features which are commonly required by developers, but not yet available.
👆👆看不懂不要紧，目前我觉得它只是一个帮助大家过渡Compose的库，未来这个库可能会被谷歌废弃.
👇👇下面也是官方介绍的原话：
Future?
Any of the features available in this group of libraries may become obsolete in the future, at which point they will (probably) become deprecated. 个人觉得应该会像以前android的support 升级到 appcompat 再到后来升级到androidX这样慢慢整合的过程
Accompanist目前有哪些功能？
1.1 🖼️ Image loading
目前集成了Coil和Glide的图片加载，依赖如下：
//按需选择自己喜欢的
implementation "com.google.accompanist:accompanist-glide:<version>"
implementation "com.google.accompanist:accompanist-coil:<version>"
举个简单的用法示例：
//Glide的用法
Image(
painter = rememberGlidePainter(
"https://picsum.photos/300/300",
fadeIn = true
),
contentDescription = null,
)
//Coil用法: 把上面的rememberGlidePainter
//换成rememberCoilPainter就可以看到效果了
//更多扩展用法可以Google或者去官方文档查阅
1.2 📐 Insets
我觉得最🐂🍺的地方就是配合键盘互动的地方，使用Compse之后，只需要使用到几个关键代码就可以搞定，非常滴银杏👍👍👍
1.需要注意的是：列表手势滑动控制键盘动画目前任然需要：API 30+ 的设备上运行时有效；
2.点击文本输入框，API 21+的设备键盘弹出来任然有动画跟随；
3.手势的话，不生效，需要API 30+；
4.(目前列表滑动不稳定,体验不好，用Redmi k30手机测试的时候，发现图片已经加载了，在列表底部进行滑动操作的时候会出现图片闪的问题)；
列表滑动到底部,拉出键盘动画
//需要先依赖这两个libary
implementation "com.google.accompanist:accompanist-insets:<version>"
implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
第一步：通知视窗，我们（应用）会处理任何系统视窗（而不是 decor）
WindowCompat.setDecorFitsSystemWindows(window, false)
第二步：为了效果好看，可以用rememberSystemUiController将系统栏(sb和nav)背景设置为透明（不设置也阔以，不影响）
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight
systemUiController.setSystemBarsColor(Color.Transparent, darkIcons = useDarkIcons)
第三步：启用动画插图的支持
ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
mainContent()
}
第四步：允许手势滚动组件拉/推 IME 打开/关闭键盘
通过NestedScrollConnection返回的内置实现来实现的rememberImeNestedScrollConnection()
注意：此功能仅在 API 30+ 的设备上运行时有效。
//简单的一个例子,核心代码如下：
@Composable
private fun mainContent() {
Scaffold(
topBar = {
TopAppBar(....)
},
bottomBar = {
Surface(elevation = 1.dp) {
val text = remember { mutableStateOf(TextFieldValue()) }
OutlinedTextField(
//省略其他属性定义，自己设置,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 8.dp)
//👇👇todo:注意这个方法：👇👇
//它的意思是：键盘向上时自动添加填充
.navigationBarsWithImePadding()
//👆👆-----------------👆👆
)
}
},
modifier = Modifier.fillMaxSize()
) { contentPadding ->
Column {
LazyColumn(
contentPadding = contentPadding,
modifier = Modifier
.weight(1f)
.nestedScroll(connection = rememberImeNestedScrollConnection())
) {
items(传入数据集合) {
//item......
}
}
}
}
}
这样就可以让你的键盘和界面互动起来了,非常的银杏😍😍😍
官方键盘互动Demo：ImeAnimationSample
Modifier.navigationBarsWithImePadding：键盘向上时自动添加填充
navigationBarsWithImePadding含义
1.3 🍫 System UI Controller
用于更新 Jetpack Compose 中的系统 UI 栏颜色
implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
简单示例代码如下：
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight
SideEffect {
//设置状态栏背景色为透明,状态栏图标颜色是黑色
systemUiController.setStatusBarColor(
color = Color.Transparent,
darkIcons = true
)
}
1.4 📖 Pager
一个为 Jetpack Compose 提供分页布局的库，类似于 Android 的 ViewPager
功能太强大了，直呼6666666，包括Banner轮播图我们都可以借助它来实现
implementation "com.google.accompanist:accompanist-pager:<version>"
//如果需要用指示器的话，请添加下方的依赖
implementation "com.google.accompanist:accompanist-pager-indicators:<version>"
详细使用细节介绍：Accompanist Pager
1.5 🌊 Flow layouts
与标准的Row和Column可组合的不同，如果这些子项超过可用空间，它们会跨多行/多列布局
FlowRow {
//包裹compose控件，从左往右布局排列，超出屏幕内容，自动换行显示
}
FlowColumn {
// 包裹compose控件：将其子项置于垂直流中的可组合项。
// 与 Column 不同的是
// 如果『垂直空间太小』而无法将所有子项放在一列中，则可以使用多列(一行显示)
// 如果『用的是verticalScroll包裹』，那么FlowColum只会（一列显示）
}
垂直方向不能滚动,高度不能超过一屏
Column{
Text(text = "无任何修饰的Column包裹")
//FlowRow子view瀑布流的排版显示
//FlowColum子view超出屏幕，在一行显示多列
ShowFlowLayout()
}
@Composable
fun ShowHorizontalPager(){
Text(text = "FlowRow")
FlowRow {
Image(..)
//随便添加2-3个保证下面的能显示在屏幕内
}
Text(text = "FlowColumn")
FlowColumn(modifier = Modifier
.fillMaxWidth()
//保证超出屏幕之后能横向滑动
.horizontalScroll(rememberScrollState())) {
Image(..)
//省略几百个....
}
}
垂直方向可以滚动,高度能超过一屏
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
Text(text = "Modifier.verticalScroll修饰的Column包裹")
//FlowRow子view瀑布流的排版显示
//FlowColumn子view只会在一列显示，不会并排显示
ShowFlowLayout()
}
1.6 🎨 AppCompat Theme Adapter
可以在Jetpack Compose 中重用AppCompat XML 主题进行主题化
该库试图弥补AppCompat XML 主题与Jetpack Compose 中的主题之间的差距，允许你的可组合MaterialTheme基于Activity的 XML 主题：
AppCompatTheme {
// MaterialTheme.colors, MaterialTheme.shapes, MaterialTheme.typography
// will now contain copies of the context's theme
}
当一次迁移现有应用程序、片段（或其他 UI 容器）时，还是挺方便的。
AppCompat Compose文档
1.7 ⬆️ Swipe To refresh
下拉刷新用法如下:
val viewModel: MyViewModel = viewModel()
val isRefreshing by viewModel.isRefreshing.collectAsState()
SwipeRefresh(
state = rememberSwipeRefreshState(isRefreshing),
onRefresh = { viewModel.refresh() },
) {
LazyColumn {
items(30) { index ->
// TODO: list items
}
}
}
