介绍一点Accompanist里面的库--FlowLayout、Pager、Pager Indicators

介绍一点Accompanist里面的库--FlowLayout、Pager、Pager Indicators

前言

经常用Compose开发的小伙伴们一定不会对Accompanist这个词感到陌生，如果说Accompanist是个library？那就小看它了，如果说它是个仓库？差点意思，官方文档上有一段对Accompanist的详细解释

Accompanist is a group of libraries that aim to supplement?Jetpack Compose?with features that are commonly required by developers but not yet available. Accompanist is a labs like environment for new Compose APIs. We use it to help fill known gaps in the Compose toolkit, experiment with new APIs and to gather insight into the development experience of developing a Compose library. The goal of these libraries is to upstream them into the official toolkit, at which point they will be deprecated and removed from Accompanist.

意思就是说Accompanist集合了一些开发者们需要的,但还没有正式公布的库，它就像一个实验室一样，逐步去一一改善这些库的开发体验，最终目的是把Accompanist里面的库转移到Compose的正式官方库里面去，有点类似于员工转正，所以如果现在去一一查看这些库的文档的时候，会发现有的库底下有那么一段说明

This library has been deprecated as official support is now available in Compose 1.x.x

意思就是这个库已经"转正"了，在Compose的1.x.x版本里面就可以使用，所以不要一看见deprecated这个词就以为这个库不重要，相反，这里的deprecated表示这个库以后就会作为Compose开发的主要成员之一，所以如果想要更深入了解Compose开发，那么预先对这些库做一番调研就是让你为今后的Compose开发提早做准备

FlowLayout

之前在Compose里面要展示流式布局，基本没法做到，因为在多个子视图的场景下，如果使用Row或者Column，只能在它的mainAxisSize方向上绘制布局，如果子视图超过父视图可用空间了，那么超出部分是被遮挡住的，使用网格布局LazyVerticalGrid虽然可以满足展示多个子视图时候横向展示不下时候就纵向新增一行，但是缺点是每一个item的宽度是固定的，没有办法让宽度来自适应item的内容，所以Accompanist里面就推出了流式布局FlowLayout

依赖地址

implementation "com.google.accompanist:accompanist-flowlayout:<version>"

version是要依赖的版本号，截止至写这篇文章的时间，最新版本为0.31.1-alpha,但是这个库在Compose 1.4.0中已经添加进去了，所以如果项目中Compose版本在1.4.0或以上的话，就不需要另外添加上面这个依赖了

如何使用

FlowLayout里面主要提供了两种布局，分别是横向流式布局FlowRow以及纵向流式布局FlowColumn,我们先展示个横向的流式布局，首先看下FlowRow里面都有啥参数

参数都很好理解，要么就是对齐方式，要么就是横向或者纵向的间距，下面写个例子来体验下

这边在FlowRow里面连续创建了多个Text,如果是在Row布局里面，我们知道肯定有部分数据是看不到的，但在FlowRow里面如何呢？我们看下

虽然样式蛮丑的，但是的确是内容超过屏幕宽度的时候换行了，我们给Text加点样式，边距也加上

最终展示的效果如何呢？我们看下

流式的感觉就出来了，很方便，FlowColum的用法差不多，这里不展示了，有兴趣的可以自己试一下

Pager

众所周知，Compose里面没有什么组件是可以实现像传统Android里面ViewPager一样的效果，除非去自定义，所以谷歌在Accompanist组件库里面加入了Pager组件，专门用来实现类似于ViewPager一样的效果

依赖地址

谷歌已经在Compose 1.4.0里面加入了Pager组件，所以如果你的Compose库在1.4.0或以上，就可以直接使用，如果在1.4.0版本以下，可以通过以下方式导入Pager

implementation "com.google.accompanist:accompanist-pager:<version>"

目前最新版本是0.31.1-alpha

如何使用

Pager跟FlowLayout一样，主要组件也是按照横向与纵向分成两个，分别是HorizontalPager与VerticalPager,使用起来也很简单，先以HorizontalPager为例写个三个视图切换的效果

我们看到这里是根据下标值来展示不同的颜色背景，正式开发中我们就可以通过下标从服务端下发的列表里面取出对应的数据来渲染我们的视图，不用像以前ViewPager一样还要写Adapter,方便了许多,而如果想要设置视图之间的间距，我们可以使用itemSpacing属性

而如果想要设置视图的内边距，就可以使用contentPadding，并且同itemSpacing属性一起使用可以制造出视图的两侧露出一点前后视图的效果

而VerticalPager的使用方法与HorizontalPager是一样的，唯一区别就是VerticalPager是垂直滑动的，我们将上述例子中的HorizontalPager组件换成VerticalPager,再把宽高设置成全屏，那就得到了一个仿某音一样的滑动效果

Pager Indicators

说到Pager肯定不能漏掉Pager Indicator,因为像类似于ViewPager一样的控件，都会有个指示器告诉用户总共有几个视图,当前在第几个视图

依赖地址

同Pager一样，Indicators的库在Compose 1.4.0已经被引入进来了，Accompanist的依赖地址如下

implementation "com.google.accompanist:accompanist-pager-indicators:<version>"

如何使用

我继续用上面的例子，在HorizontalPager底下加上一个指示器，指示器也分横向跟纵向两个组件，横向的是HorizontalPagerIndicator，纵向的估计不用说大家也知道了，首先我们看下指示器里面都提供了哪些参数

都是些熟悉的配方，唯一一个稍感陌生的就是PagerState,这个是记录着当前滑动到哪一个视图的下标值，使用rememberPagerState()函数创建,并且同时需要传给HorizontalPager与HorizontalPagerIndicator，这样才能让Pager与指示器绑定起来

指示器的默认样式就如效果图这样，目前来讲它能更改的样式有限，只能改下选中与未选中的颜色，宽高，指示器之间的间距以及形状，我们利用提供的参数更改一下例子中指示器的样式

如果想要做一些更加复杂的效果，可能需要我们去自定义一个指示器了

总结

这篇文章里面介绍了Accompanist库里面的FlowLayout，Pager以及Pager Indicators组件，它们都已经被Compose纳入到正式库里面，说明谷歌还会去扩展这三个组件的功能，我们可以期待一下

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!