前言

Compose库中是没有原生的类似FlowLayout的布局的

于是我们来自己实现一个FlowLayout

正文

FlowLayout

先看看FlowLayout实现的效果:

代码很简单:

看一下api:

/*** 可以自动换行的线性布局* [modifier]修饰* [orientation]排列的方向,[Orientation.Horizontal]时会先横向排列,一排放不下会换到下一行继续横向排列* [horizontalAlignment]子级在横向上的位置* [verticalAlignment]子级在竖向上的位置* [horizontalMargin]子级与子级在横向上的间距* [verticalMargin]子级与子级在竖向上的间距* [maxLines]最多能放多少行(或列)* [content]compose内容区域*/
@Composable
fun FlowLayout(modifier: Modifier = Modifier,orientation: Orientation = Orientation.Horizontal,horizontalAlignment: Alignment.Horizontal = Alignment.Start,verticalAlignment: Alignment.Vertical = Alignment.Top,horizontalMargin: Dp = 0.dp,verticalMargin: Dp = 0.dp,maxLines: Int = Int.MAX_VALUE,content: @Composable () -> Unit
)

原理:

原理其实和安卓xml布局中的FlowLayout一样,就是测量所有的子项,并根据方向,间距,对齐方式对子项进行测量和放置即可

引入项目

在根项目的build.gradle文件中加入:

allprojects {repositories {maven { url 'https://jitpack.io' }...}
}

app的build.gradle中加上,最新版本参考:JitPack | Publish JVM and Android libraries

dependencies{...implementation 'com.github.ltttttttttttt:ComposeViews:1.1.4'
}

然后就可以愉快的使用FlowLayout了

项目已开源,欢迎star:GitHub - ltttttttttttt/ComposeViews

并且项目中不止有FlowLayout,还有更多好用的Compose组件,比如:

ComposePager

Banner

GoodTextField和PasswordTextField

后续还会添加更多的Compose组件

end

Compose中的FlowLayout相关推荐

Jetpack Compose中的Accompanist
accompanist是Jetpack Compose官方提供的一个辅助工具库,以提供那些在Jetpack Compose sdk中目前还没有的功能API. 权限依赖配置: repositories ...
在 Jetpack Compose 中安全地使用数据流
/ 今日科技快讯 / 11月17日下午,暴雪中国官方微博发布公告称,各位暴雪游戏的国服玩家,我们很遗憾地通知大家,随着我们与网之易公司现有授权协议的到期,自2023年1月24日0点起,所有&l ...
Jetpack Compose中的Modifier
Modifier的基本使用 Modifier修饰符是Jetpack Compose中用来修饰组件的,提供常用的属性,写布局时几乎所有Composable组件的大部分属性都可以用Modifier 来修饰 ...
Jetpack Compose中的手势操作
点击事件监听点击事件非常简单,使用 clickable 和 combinedClickable 修饰符即可满足需求: @OptIn(ExperimentalFoundationApi::class) ...
详解Jetpack Compose中的Modifier修饰符
前言本文将会介绍Jetpack Compose中的Modifier.在谷歌官方文档中它的描述是这么一句话:Modifier元素是一个有序.不可变的集合,它可以往Jetpack Compose UI元 ...
Compose 中的附带效应
关键词附带效应是指在可组合函数范围之外发生的应用状态变化效应是一种可组合函数,该函数不会发出界面,并且在组合完成后产生附带效应. 效应名称作用用例 LaunchedEffect 在某个可组合项 ...
Jetpack Compose 中使用 Lottie 动画
从事 Android 开发的都知道 airbnb 的 Lottie 库,如今它也支持在 Jetpack Compose 中使用了. http://airbnb.io/lottie/#/android ...
Jetpack All In Compose ？看各种Jetpack库在Compose中的使用
Jeptack Compose 主要目的是提高 UI 层的开发效率,但一个完整项目还少不了逻辑层.数据层的配合.幸好 Jetpack 中不少组件库已经与 Compose 进行了适配,开发者可以使用这些 ...
42. Compose1.4 如何在Jetpack Compose中为文本应用描边效果（OpenAi翻译）
探索Jetpack Compose中文本笔画效果的DrawStyle API Jetpack Compose最近为TextStyle增加了很多新的自定义选项,TextStyle.drawStyle就是 ...

Compose中的FlowLayout

前言

正文

FlowLayout

引入项目

Compose中的FlowLayout相关推荐

最新文章

热门文章