Jetpack Compose布局的使用详细介绍

目录
  • 一.标准布局组件
  • 二.修饰符
  • 三.滑动组件
    • 1.ScrollableRow和ScrollableColumn
    • 2.LazyRowFor和LazyColumnFor

一.标准布局组件

Compose中可以将多个控件元素组合使用，例如下面这样，

@Composable
fun WidgetGroup() {
    Text(text = "不为往事扰")
    Text(text = "余生只愿笑")
}

但是我们会发现，如果仅仅是这样，两个文本控件会重叠在一起，类似于下面这种样式：

如果我们想将多个控件垂直摆放在一起，可以在控件外层添加Column：组件

@Composable
fun WidgetGroup() {
    Column {
        Text(text = "不为往事扰")
        Text(text = "余生只愿笑")
    }
}

如果想要水平摆放在页面上可以使用 Row组件

@Composable
fun WidgetGroup() {
    Row {
        Text(text = "不为往事扰")
        Text(text = "余生只愿笑")
    }
}

二.修饰符

如果我们还想在文字下面添加一张图片，可以直接添加一个Image控件：

@Composable
fun WidgetGroup() {
    val image = imageResource(id = R.drawable.header)
    val imageModifier = Modifier
        .preferredHeight(180.dp)
        .fillMaxWidth()
        .clip(RoundedCornerShape(10.dp))
    Column {
        Text(text = "不为往事扰")
        Text(text = "余生只愿笑")
        Spacer(modifier = Modifier.preferredHeight(10.dp))
        Image(asset = image, modifier = imageModifier, contentScale = ContentScale.Crop)
    }
}

Spacer控件是用来填充空白的，我们还可以添加Modifier修饰符来修饰各种控件和组件。具体用法可以参考官方api，例如这里我们可以利用修饰符来添加图片的圆角。

现在我们在来优化一下这个布局，在文字的左边加一个圆形头像，来看看应该怎么添加吧：

  val imageHead=Modifier.preferredSize(50.dp)
        .clip(CircleShape)
   Column(modifier = Modifier.padding(10.dp)){
        Row (verticalAlignment = Alignment.CenterVertically){
            Image(asset = image,modifier = imageHead,contentScale = ContentScale.Crop)
            Spacer(modifier = Modifier.preferredSize(10.dp))
            Column {
                Text(text = "不为往事扰")
                Text(text = "余生只愿笑")
            }
        }
        Spacer(modifier = Modifier.preferredHeight(10.dp))
        Image(asset = image, modifier = imageModifier, contentScale = ContentScale.Crop)
    }

我们需要将这两个文本控件用Column包裹起来，然后在它的上级在用Row包裹，在Row里面添加一个Image控件，利用修饰符来对Image进行裁剪，使其变成圆形。来看看效果吧。

三.滑动组件

1.ScrollableRow和ScrollableColumn

使用 ScrollableRow 或 ScrollableColumn 可使 Row 或 Column 内的元素滚动。

@Composable
fun ScollableWidget() {
    ScrollableColumn(Modifier.fillMaxSize()) {
        for (i in 1..10) {
            WidgetGroup()
        }
    }
}

如果要显示的元素很少，这种方法效果很好，但对于大型数据集，很快就会出现性能问题。如需仅显示屏幕上可见的部分元素，请使用 LazyColumnFor 或 LazyRowFor。

2.LazyRowFor和LazyColumnFor

与 RecyclerView类似，LazyColumnFor和 LazyRowFor不会布置或呈现屏幕外的任何可组合项。使用方式也很简单，也不需要适配器，直接调用方法即可，可以设置数据，以及修饰符等等

    LazyColumnFor(items = getUsers()) {
        WidgetGroup(it.userName)
    }
    LazyRowFor(items = getUsers()) {
        WidgetGroup(it.userName)
    }

可以看一下其需要传入的参数，有数据源，修饰符，padding，以及Alignment，大部分都是用来调整页面样式的，最后一个是用来声明单个item的样式布局。当然如果我们想使用不同的item布局的话只需要在声明item样式的时候新增判断就可以了。

@Composable
fun <T> LazyColumnFor(
    items: List<T>,  //用来填充列表的数据源
    modifier: Modifier = Modifier, //用来修饰列表的样式
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp), //用来设置item之间的间距
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,//用来设置对齐位置
    itemContent: @Composable LazyItemScope.(T) -> Unit //用来声明item样式布局
)

到此这篇关于Jetpack Compose布局的使用详细介绍的文章就介绍到这了,更多相关Jetpack Compose布局内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用Jetpack Compose实现绘制五角星效果

    利用Jetpack Compose实现绘制五角星效果

    目录 说明 自定义星行Modifier 原理 实现 代码 最终实现效果 说明 compose中我们的所有ui操作,包括一些行为,例如:点击.手势等都需要使用Modifier来进行操作.因此对Modifier的理解可以帮助我们解决很多问题的 自定义星行Modifier 本文我们打算自定义一个Modifier,通过这个modifier我们可以实现用一个操作符就画出五角星的效果 原理 我们实现绘制五角星的原理如下图,首先我们会虚构两个圆,将内圆和外圆角度平分五份,然后依次连接内圆和外圆的切点的坐标,然

  • 利用Jetpack Compose绘制可爱的天气动画

    利用Jetpack Compose绘制可爱的天气动画

    目录 1. 项目背景 2. MyApp:CuteWeather App界面构成 3. Compose自定义绘制 声明式地创建和使用Canvas 强大的DrawScope 4.简单易用的API 使用原生Canvas 5. 雨天效果 雨滴的绘制 雨滴下落动画 6.Compose自定义布局 7.. 雪天效果 雪花的绘制 雪花飘落动画 雪花的自定义布局 8. 晴天效果 太阳的绘制 太阳的旋转 9. 动画的组合.切换 将图形组合成天气 ComposedIcon ComposedWeather 1. 项目背

  • Jetpack Compose 实现一个图片选择框架功能

    Jetpack Compose 实现一个图片选择框架功能

    目录 获取图片 拍照策略 NothingCaptureStrategy FileProviderCaptureStrategy MediaStoreCaptureStrategy 总结 拍照权限 取消拍照导致的脏数据 resolveActivity API 的兼容性 File API 的兼容性 Github 知乎的 Matisse应该蛮多 Android 开发者有了解过或者是曾经使用过,这是知乎在 2017 年开源的一个 Android 端图片选择框架,其颜值在现在看来也还是挺不错的 可惜近几年

  • Jetpack Compose实现列表和动画效果详解

    Jetpack Compose实现列表和动画效果详解

    目录 创建一个列表消息卡片 可交互的动画效果 创建一个列表消息卡片 到目前为止,我们只有一个消息的卡片,看上去有点单调,所以让我们来改善它,让它拥有多条信息.我们需要创建一个能够显示多条消息的函数.对于这种情况,我们可以使用 Compose 的 LazyColumn 和 LazyRow.这些 Composable 只渲染屏幕上可见的元素,所以它们的设计对于长列表来说很有效果.同时,它们避免了 RecyclerView 与 XML 布局的复杂性. import androidx.compose.f

  • 通过Jetpack Compose实现双击点赞动画效果

    通过Jetpack Compose实现双击点赞动画效果

    目录 实现步骤 先红色画个爱心 点击事件加动画 完整代码 效果图 实现步骤 先红色画个爱心 Icon( Icons.Filled.Favorite, "爱心", Modifier .align(Alignment.Center) tint = Color.Red ) 点击事件加动画 双击监听 .pointerInput(Unit) { detectTapGestures( onDoubleTap = { ... } ) } #### **API 介绍** | API名称 | 作用 |

  • 利用Jetpack Compose实现经典俄罗斯方块游戏

    利用Jetpack Compose实现经典俄罗斯方块游戏

    目录 可组合函数 游戏机身 - TetrisBody 游戏按钮 - TetrisButton 游戏屏幕 - TetrisScreen 调度器 - TetrisViewModel 项目地址 你的童年是否有俄罗斯方块呢,本文就来介绍如何通过 Jetpack Compose 实现一个俄罗斯方块 ~~ 先看下效果图,功能还是挺完善的 就我自己的体验来说,使用 Compose 开发的应用我感受不到和 Android 原生开发之间有什么性能差异,但 Compose 在开发难度上会低很多 Google 官网上

  • Android中分析Jetpack Compose动画内部的实现原理

    Android中分析Jetpack Compose动画内部的实现原理

    目录 前言 正文 总结 前言 Compose的动画Api用起来很简单,效果看起来很神奇,那么它内部到底是如何运转的呢? 使用动画的代码示例: var isOffset by remember { mutableStateOf(false) } val offsetAnimation by animateDpAsState(targetValue = if (isOffset) 100.dp else 0.dp) Button( onClick = { isOffset = !isOffset }

  • Jetpack Compose布局的使用详细介绍

    Jetpack Compose布局的使用详细介绍

    目录 一.标准布局组件 二.修饰符 三.滑动组件 1.ScrollableRow和ScrollableColumn 2.LazyRowFor和LazyColumnFor 一.标准布局组件 Compose中可以将多个控件元素组合使用,例如下面这样, @Composable fun WidgetGroup() { Text(text = "不为往事扰") Text(text = "余生只愿笑") } 但是我们会发现,如果仅仅是这样,两个文本控件会重叠在一起,类似于下面这

  • Jetpack Compose Canvas绘制超详细介绍

    Jetpack Compose Canvas绘制超详细介绍

    目录 1. Canvas 2. 绘制方法 1. drawLine 2. drawRect 3. drawRoundRect 4. drawImage 5. drawCircle 6. drawArc 7. drawPath 8. drawPoints 3. DrawScope拓展方法 1. inset 2. translate 3. rotate与rotateRad 4. scale 5. clipRect 6. drawIntoCanvas 7. withTransform 4.参考 1. C

  • Android Jetpack组件中LifeCycle作用详细介绍

    目录 Jetpack 1.那么Jetpack是什么呢 2.为何使用Jetpack 3.Jetpack与AndroidX LifeCycle 1.LifeCycle的作用 2.LifeCycle应用 1.设计组件 2.使用组件 3.总结LifeCycle的使用 Jetpack Jetpack,我觉得翻译为“飞行器”更好听,因为Google针对编程历史乱象,整理出一套组件库,帮助开发者创造更完美的应用作品.现在市面上,很多公司招聘面试要求渐渐把Jetpack看作必会技能,Google也在疯狂的安利J

  • Jetpack Compose常用组件详细介绍

    Jetpack Compose常用组件详细介绍

    目录 1. Text 2. Image 3. LazyColumn 1. Text 日常最常用的应该就是显示文字,所以有必要说一下Text控件.首先源码如下: @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = nu

  • Android中卡顿优化布局详细介绍

    Android中卡顿优化布局详细介绍

    目录 背景 实践过程 如何渲染界面 什么是过度绘制 如何查看绘制维度 界面优化 硬件加速原理 总结 背景 在当下移动互联网后半场,手机已经是人手必备的设备.App是离用户最近的应用,界面又是最直观影响用户体验的关键部分,其流畅度直接影响用户对产品的评价和留存. 技术是服务于人的,如果技术无法给你带来良好的体验,那技术本身的存在就具有争议. 所以界面性能是至关重要的,不可忽视. 实践过程 布局代码是最基础的,但也是最重要的. 首先我们看个简单小案例 不同深浅的颜色来表示过度绘制: 没颜色:没有过度

  • 利用Jetpack Compose复刻游戏Flappy Bird

    利用Jetpack Compose复刻游戏Flappy Bird

    目录 1.拆解游戏 2.复刻画面 ⅰ.布置远近景 ⅱ.摆放管道 ⅲ.放置小鸟 3.状态管理和架构 4.路面动起来 5.管道动起来 6.小鸟飞起来 7.碰撞和实时分值 8.结束分值和重新开始 9.最终效果 Flappy Bird是13年红极一时的小游戏,其简单有趣的玩法和变态的难度形成了强烈反差,引发全球玩家竞相把玩,欲罢不能!遂选择复刻这个小游戏,在实现的过程中向大家演示Compose工具包的UI组合.数据驱动等重要思想. 1.拆解游戏 不记得这个游戏或完全没玩过的朋友,可以点击下面的链接,体验

  • 利用Jetpack Compose实现主题切换功能

    利用Jetpack Compose实现主题切换功能

    目录 前言 color.kt Theme.kt 关于compositionLocalOf 完整代码 前言 新建的Compose项目默认的 Material 主题为我们提供了一些颜色,但对我这种花里胡哨的人来说根本不够呀. 所以系统提供的主题不能满足需求时候可以自己配置主题 compose 实现换肤很简单 之前xml方法可复杂了 通过LayoutInflater调用inflate方法加载XML布局,在inflate方法中有一个createViewFromTag,再根据LayoutInflater当

  • Android Jetpack Compose实现列表吸顶效果

    Android Jetpack Compose实现列表吸顶效果

    目录 stickyHeader 实体类 加载假数据 吸顶标题 二级条目 完整代码 效果图 安卓传统的 Recyclerview 打造悬浮头部StickyHeader的吸顶效果,十分麻烦,而在Compose中就简单多了 stickyHeader Compose设计的时候考虑得很周到,他们提供了stickyHeader 作用就是添加一个粘性标题项,即使在它后面滚动时也会保持固定.标头将保持固定,直到下一个标头取而代之. 参数key - 表示唯一的密钥键. 它不允许对列表出现使用相同的键.密钥的类型应

随机推荐