Jetpack Compose - Accompanist 组件库

写在最前面,本篇文章只是挑了大部分功能写出来，当然里面也有我们针对的部分知识点扩展介绍.
更多使用介绍可以去: 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
        }
    }
}

下拉刷新文档