有哪些高级且鲜为人知的Modifier能为你的UI做些什么？- 对Jetpack Compose Modifier的全面探索

Jetpack Compose 中 Modifier 的高级和常用方法之旅

简介

Jetpack Compose 的声明性和丰富的功能广受好评, 但它的魅力远不止于此. 在常用工具之外, 还有一系列高级且鲜为人知的Modifier, 它们为增强UI设计提供了尚未开发的潜力.

本文旨在超越表面, 探索 Jetpack Compose 中那些通常不被关注的Modifier. 我们将重点关注那些虽然并不总是在主流讨论中, 但却能为你的应用开启更深层次的功能和设计可能性的工具. 这些Modifier提供了对布局的复杂控制, 对UI进行了微妙但有影响的改进.

探索不仅仅是理论上的. 在详细了解每个Modifier的功能和应用的同时, 我们还将进行实用的交互式演示. 这些演示旨在让你真实地感受这些Modifier是如何运行的, 让你看到实际效果, 并将它们应用到自己的作品中. 这是为了弥合概念与实践之间的差距, 为你提供一个实验和学习的平台.

无论你是精通Jetpack Compose, 还是刚刚开始你的旅程, 这篇文章都旨在拓宽你的工具包, 激发你对UI设计的新思维.

1. `Modifier.graphicsLayer`

.graphicsLayer编程实践

概述

Modifier.graphicsLayer允许开发人员对UI元素应用高级图形变换. 该Modifier可控制旋转, 缩放, 不透明度和阴影等属性, 从而创建复杂的视觉效果.

使用案例

三维效果 - 在 X 轴, Y 轴甚至 Z 轴上实现旋转效果, 以创建深度感, 使元素呈现三维效果.
增强动画效果 - 通过在过渡期间添加阴影和改变不透明度来增强动画效果, 使演示更具活力.
性能优化 - 通过只修改图层属性而不是重新绘制整个可组合图层来减少渲染负载.

示例

FlipCardDemo可组合函数演示了如何使用Modifier.graphicsLayer在Card上创建翻转动画. 此示例展示了旋转, 阴影升降和 alpha 变化的组合, 以创建交互式 3D 翻转卡片效果.

@Composable
fun FlipCardDemo() {
    var flipped by remember { mutableStateOf(false) }
    val rotationZ by animateFloatAsState(targetValue = if (flipped) 180f else 0f, label = "")

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Card(
            modifier = Modifier
                .graphicsLayer {
                    this.rotationX = rotationZ
                    cameraDistance = 12f * density
                    shadowElevation = if (flipped) 0f else 30f
                    alpha = if (flipped) 0.3f else 0.8f
                }
                .clickable { flipped = !flipped }
                .width(350.dp)
                .height(200.dp),
            colors = CardDefaults.cardColors(
                containerColor = Color.DarkGray,
            )
        ) {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text("Hey bro", color = Color.White, fontSize = 32.sp)
            }
        }
    }
}

性能考虑因素

要谨慎使用Modifier, 尤其是在复杂动画或同时对多个元素进行动画处理的情况下. 有时, 使用更简单的Modifier会是更好的选择, 这取决于你想要使用它的用例.
应明智使用动画以避免性能开销, 尤其是在列表或网格中.

2. `Modifier.drawWithCache`

.drawWithCache编程实践

概述

在 Jetpack Compose 中, Modifier.drawWithCache是一个专门的Modifier, 可以提高复杂绘图操作的性能. 当你的自定义绘制逻辑涉及计算或不常变化的操作时, 该Modifier尤其有用. 它允许你缓存绘图的某些部分, 减少每次重新合成时重新计算或重新绘制的需要.

使用案例

复杂的自定义绘图-- 适用于具有复杂绘图逻辑的可组合元素, 如自定义形状, 图案或视觉效果, 这些元素的生成都需要高昂的计算成本.
动态和静态元素 - 当绘图的一部分根据用户交互或状态变化而动态变化, 而其他部分保持静态时, 该功能非常有用.
优化重绘 - 在重新组合频繁但实际绘图变化极小的情况下, 可减少开销.

工作原理

drawWithCache提供了一个画布, 你可以在上面绘制并缓存绘制结果.
只有当你使用的参数发生变化时, drawWithCache中的绘图才会重新合成.
你可以有效地将动态和静态元素结合起来, 缓存静态部分, 同时允许动态部分根据需要进行更改和重绘.

示例

创建一个基本的条形图来演示数据可视化. 条形图将显示静态元素(如图表的坐标轴)和动态元素(如代表数据点的条形图), 这些元素可根据用户交互或数据更新而改变.

@Composable
fun BarChartExample(dataPoints: List<Float>) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
      Box(modifier = Modifier
          .size(300.dp)
          .drawWithCache {
              onDrawWithContent {
                  drawContent() 

                  // Draw axes
                  drawLine(
                      start = Offset(50f, size.height),
                      end = Offset(size.width, size.height),
                      color = Color.Green,
                      strokeWidth = 10f
                  )
                  drawLine(
                      start = Offset(50f, 50f),
                      end = Offset(50f, size.height),
                      color = Color.Red,
                      strokeWidth = 10f
                  )

                  // Draw bars for each data point
                  val barWidth = size.width / (dataPoints.size * 2)
                  dataPoints.forEachIndexed { index, value ->
                      val left = barWidth * (index * 2 + 1)
                      val top = size.height - (value / dataPoints.max() * size.height)
                      val right = left + barWidth
                      val bottom = size.height
                      drawRect(
                          Color.Blue,
                          topLeft = Offset(left, top),
                          size = Size(right - left, bottom - top)
                      )
                  }
              }
          }
        )
    }
}

说明

条形图的坐标轴是静态的, 只绘制一次.
代表数据点的柱形图是动态的. 它们会根据提供给可组合器的 dataPoints 发生变化.
使用 drawWithCache 可以优化这些元素的绘制, 尤其是在图表需要频繁更新或包含很多数据点的情况下.

性能考虑因素

虽然 drawWithCache 可以提高复杂绘图的效率, 但应明智使用. 过度使用会导致不必要的缓存和内存占用增加.
当计算绘图的成本与重新组合的频率相比较高时, 它最为有效.

潜在应用

数据可视化 - 对于部分图形(如网格)保持不变, 但数据点可能发生变化的图表或图形非常有效.
游戏开发 - 适用于渲染游戏界面中需要复杂绘图的静态背景或元素.
交互式UI元素 - 通过自定义, 复杂的设计来增强UI, 这些设计需要高效的重绘.

3. `Modifier.onSizeChanged`

Modifier.onSizeChanged编程实践

概述

Modifier.onSizeChanged用于响应可组合尺寸的变化. 在需要根据组件大小执行操作或调整布局的情况下, 该Modifier会特别有用, 因为在运行前可能无法知道组件的大小.

使用案例

响应式UI - 根据组件大小调整UI, 这在创建需要在不同屏幕尺寸和方向上运行的布局时非常有用.
动态内容调整 - 根据可用空间调整内容或其排列, 例如调整图片大小或更改文本和按钮的布局.
基于尺寸的动画 - 当组件达到一定尺寸时触发动画或过渡效果.

工作原理

onSizeChanged Modifier会在可组合组件发生变化时回调其新尺寸.
该尺寸信息可用于在UI中做出决策或触发操作.

示例

一个包含图片和文本块的UI组件.
对于较宽的屏幕(宽度大于 400dp), 图像和文本将并排显示(水平布局).
对于较窄的屏幕(宽度小于或等于 400dp), 图片将位于文本上方(垂直布局).

@Composable
fun ResponsiveImageTextLayout() {
    var containerWidth by remember { mutableStateOf(0.dp) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .onSizeChanged { newSize ->
                containerWidth = newSize.width.dp
            },
    ) {
        if (containerWidth < 600.dp) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Center
            ) {
                PlaceHolderComponent()
                TextComponent()
            }
        } else {
            Column(
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                PlaceHolderComponent()
                TextComponent()
            }
        }
    }
}

@Composable
fun PlaceHolderComponent() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.LightGray)
    )
}

@Composable
fun TextComponent() {
    Text(
        text = "Responsive Text",
        modifier = Modifier.padding(16.dp)
    )
}

说明

Box使用Modifier.onSizeChanged监听尺寸变化.
根据 Box 的宽度, 它会在 Row 和 Column 布局之间切换.

性能注意事项

注意不要在 onSizeChanged lambda 中进行过多的重新组合. 过多使用会导致性能问题, 尤其是在UI比较复杂的情况下.
一般来说, 好的做法是将 onSizeChanged 回调中的逻辑保持在最低限度并提高效率.

潜在应用

可折叠菜单 - 根据可用空间调整菜单或导航栏的布局.
自适应网格 - 根据容器大小改变网格布局中的列数.
交互式图表 - 根据尺寸变化调整数据可视化的大小或改变其表现形式.

4. `Modifier.onPlaced`

Modifier.onPlaced编程实践

概述

Modifier.onPlaced是一个非常有用的Modifier, 它允许你获取可组合组件在其父对象中的位置信息. 当你需要知道一个组件在屏幕上的确切位置时, 这可能会特别方便, 因为在创建依赖于组件位置的自定义布局或交互时, 这可能是必要的.

使用案例

自定义布局行为：确定可组合组件的位置, 以便根据这些位置创建自定义布局安排或动画.
交互反馈：根据元素放置的位置提供反馈或交互, 例如显示工具提示或上下文菜单.
动态定位：调整浮动 UI 元素(如弹出窗口或覆盖)相对于其他组件的位置.

工作原理

onPlaced Modifier会在回调中提供一个LayoutCoordinates对象, 其中包含有关可组合元素的大小和位置的信息.
你可以使用这些信息来了解可组合元素相对于其父元素或整个屏幕的位置.

示例

交互式网格, 点击每个单元格可显示注释或工具提示.
Modifier.onPlaced用于确定每个单元格在网格中的精确位置, 使注释显示在点击的单元格上方.

@Composable
fun InteractiveGridDemo() {
    val cellSize = 90.dp
    val numRows = 3
    val numColumns = 3
    val gridState = remember { mutableStateOf(Array(numRows * numColumns) { Offset.Zero }) }
    val selectedCell = remember { mutableStateOf(-1) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        for (row in 0 until numRows) {
            Row {
                for (column in 0 until numColumns) {
                    val cellIndex = row * numColumns + column
                    Box(
                        modifier = Modifier
                            .size(cellSize)
                            .onPlaced { layoutCoordinates ->
                                gridState.value[cellIndex] = layoutCoordinates.positionInRoot()
                            }
                            .clickable { selectedCell.value = cellIndex }
                            .border(8.dp, Color.Black)
                    )
                }
            }
        }
    }


    if (selectedCell.value >= 0) {
        val position = gridState.value[selectedCell.value]
        Box(
            modifier = Modifier
                .offset {
                    IntOffset(
                        position.x.roundToInt() - 35.dp
                            .toPx()
                            .toInt(),
                        position.y.roundToInt() - 80.dp
                            .toPx()
                            .toInt()
                    )
                }
                .size(width = 150.dp, height = 60.dp)
                .background(Color.DarkGray.copy(alpha = 0.9f)),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Cell Clicked: ${selectedCell.value}",
                color = Color.Red,
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center
            )
        }
    }
}

说明

我们创建了一个 3x3 的方框网格, 每个方框代表一个单元格.
onPlaced Modifier使用layoutCoordinates.positionInRoot()捕捉网格中每个单元格的位置, 并更新gridState.
当点击单元格时, selectedCell 会被更新, 注释框会显示在所选单元格的上方.

潜在应用

拖放界面 - 了解元素与其他组件的关系.
动态覆盖 - 根据其他UI元素的位置来定位覆盖或浮动元素.
交互式图表或地图 - 根据用户交互的位置提供图表或地图特定部分的详细信息.

性能考虑因素

在onPlaced回调中触发过多状态更改或重新组合时要谨慎, 因为这会影响性能.
最好在位置信息非常重要且无法通过其他简单方式获取的情况下使用此Modifier.

?? 用 `onGloballyPositioned` 代替如何?

a) 相对定位与全局定位-

onPlaced是关于父节点内的相对定位.
onGloballyPositioned是在整个屏幕或根布局内的绝对定位.

b) 使用案例

使用 onPlaced 进行内部布局调整和相对定位.
使用 onGloballyPositioned(全球定位)用于全局覆盖, 弹出窗口以及在更大的UI上下文中定位.

c) 性能考虑因素

两个Modifier都应谨慎使用, 以避免性能开销.
选择取决于需要相对定位还是全局定位信息.

5. `Modifier.zIndex()`

.zIndex()编程实践

概览

Jetpack Compose 中的Modifier.zIndex()是一个Modifier, 用于控制同一父布局中可组合元素的绘制顺序. 它本质上是改变元素的 Z 排序, 决定元素重叠时哪个可组合元素出现在最上面. 这对于在UI中创建深度和分层效果特别有用.

使用案例

重叠元素 - 适用于元素重叠的设计, 如卡片, 图像或任何需要显示在其他元素上方或下方的UI元素.
拖放界面 - 在拖放交互中, 可将拖动的元素设置为更高的 z-index 以确保其显示在其他元素之上.
在UI中创建深度 - 通过对元素进行分层, 有助于在UI中增加深度, 从而增强视觉层次感和美感.

工作原理

Modifier.zIndex()接受一个浮点数值. 较高的值将导致可组合元素绘制在较低值的同级元素之上.
它只影响同一父代中的绘制顺序. 不同父代中的可组合元素不受彼此 z-index 的影响.

示例

@Composable
fun LayeredCardsExample() {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Card(
            modifier = Modifier
                .offset(x = 20.dp, y = 20.dp)
                .zIndex(1f) 
        ) {
            Text("Top Most Card", modifier = Modifier.padding(16.dp))
        }
        Card(
            modifier = Modifier
                .offset(x = (-20).dp, y = (-20).dp)
                .zIndex(0.5f) 
        ) {
            Text("Middle Card", modifier = Modifier.padding(16.dp))
        }
        Card(
            modifier = Modifier
                .offset(x = (-50).dp, y = (-50).dp)
                .zIndex(0f) 
        ) {
            Text("Bottom Card", modifier = Modifier.padding(16.dp))
        }
    }
}

性能考虑因素

谨慎使用 zIndex , 因为过多的元素重叠会使UI复杂化并影响性能.
最好在视觉设计需要分层的特定情况下使用, 或者在处理动态元素(如拖放交互)时使用.

潜在应用*

交互式卡片UI - 在以卡片为基础的界面中, 选定的卡片需要放在最前面.
游戏开发 - 在游戏界面中创建分层效果.
动态内容展示 - 在内容需要动态重叠的情况下, 如在画廊或幻灯片中.

6. `Modifier.onKeyEvent`

Modifier.onKeyEvent编程实践

概述

Modifier.onKeyEvent用于处理硬件键盘上的按键事件. 它允许你定义对按键的自定义响应, 因此对需要键盘输入或导航的应用特别有用.

使用案例

键盘快捷键 - 在应用中实施键盘快捷键, 以增强用户体验并提高效率.
表单导航和提交 - 处理表单提交或输入字段之间导航的回车等按键事件.
游戏控制 - 为游戏或交互式应用中的特定按键分配操作.

工作原理

onKeyEvent Modifier会侦听按键事件, 并在按键事件发生时触发回调.
你可以检查按键事件的类型(按下键, 按上键)和按下的按键, 以定义特定的响应.

示例

@Composable
fun KeyEventExample() {
    var text by remember { mutableStateOf("Press any key") }

    Box(modifier = Modifier
        .fillMaxSize()
        .focusable() // Required to receive key input
        .onKeyEvent { keyEvent ->
            if (keyEvent.type == KeyEventType.KeyUp) {
                text = "Key pressed: ${keyEvent.nativeKeyEvent.displayLabel}"
                true // Indicate that the event was consumed
            } else {
                false // Event not handled here
            }
        }
    ) {
        Text(text, modifier = Modifier.align(Alignment.Center), fontSize = 32.sp)
    }
}

性能考虑因素

谨慎处理按键事件处理程序中的复杂逻辑, 以避免出现性能问题.
确保可组合器可聚焦以接收按键事件.

潜在应用

无障碍功能 - 通过提供键盘导航和快捷键来增强无障碍功能.
丰富的文本编辑器 - 处理文本格式或命令执行的组合键.
自定义组件 - 创建响应特定按键输入的自定义组件.

7. `Modifier.clipToBounds()`

.clipToBounds()编程实践

概述

Modifier.clipToBounds()可控制可组合元素的内容是否被剪切到其边界框内. 该Modifier对于管理超出父可组合内容边界的内容的可见性特别有用.

使用案例

控制溢出 - 防止子可组合元素超出父可组合元素的范围. 这在需要简洁, 紧凑布局的UI中至关重要.
创建遮罩效果 - 在需要隐藏部分UI元素的情况下非常有用, 可创建遮罩或部分可见等效果.

工作原理

应用于可组合元素时, clipToBounds() 可确保可组合元素或其子元素的所有绘制都限制在可组合元素的边界内.
这意味着超出边界的任何内容都将不可见.

示例

注意 - 在 Jetpack Compose 中, 某些可组合元素的默认行为确实是将其子元素剪切到边界内. 布局容器(如Box, Column, 和Row)通常就是这种情况. 如果需要允许内容溢出其边界, 就必须绕过这一默认行为. 因此, 我们将使用一个名为NonClippingLayout的可组合控件来演示 clipToBounds() 的使用.

@Composable
fun CanvasClippingExample() {
    NonClippingLayout {
        Canvas(
            modifier = Modifier.size(50.dp)
                .border(width = 2.dp, color = Color.Black)
                .clipToBounds()
        ) {
            drawRect(
                color = Color.Blue,
                size = Size(150.dp.toPx(), 150.dp.toPx())
            )
        }
    }
}

@Composable
fun NonClippingLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }

        layout(constraints.maxWidth, constraints.maxHeight) {
            placeables.forEach { placeable ->
                placeable.placeRelative(0, 0)
            }
        }
    }
}

性能考虑因素

剪切可能会消耗大量性能, 尤其是在应用于大量可组合元素或复杂布局的情况下.
在某些情况下, 避免不必要的剪切有助于更高效地渲染UI.

潜在应用*

自定义形状和图形 - 使用自定义形状创建UI元素, 元素的一部分在形状之外不可见.
溢出处理 - 在动态内容可能超出容器边界的UI设计中, 剪切可确保外观一致, 整洁.
图片库和旋转木马 - 确保对可滚动图片库中的部分图片或屏幕外图片进行剪切, 以获得精致的外观.

8. `Modifier.paddingFromBaseline()`

.paddingFromBaseline()编程实践

概述

Modifier.paddingFromBaseline()主要用于使文本相对于基线对齐. 该Modifier在需要精确垂直对齐文本的排版布局中特别有用, 尤其是相对于其他可组合元素而言.

使用案例

UI中的文本对齐 - 确保不同可组合元素中的文本沿着其基线正确对齐, 这在具有多个文本元素的设计中至关重要.
材料设计合规性 - 遵守材料设计指南, 该指南通常以基线为单位指定文本对齐方式.
一致的视觉节奏 - 在具有多个文本组件的UI中创建一致的视觉节奏.

工作原理

paddingFromBaseline会在文本基线上方添加填充. 这不同于从可组合边缘开始应用的常规填充.
它主要与 Text 可组合元素一起使用, 以便在整个UI中以视觉上一致的方式对齐文本.

示例

@Composable
fun BaselinePaddingExample() {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            "Text with baseline padding",
            modifier = Modifier
                .fillMaxWidth()
                .paddingFromBaseline(top = 32.dp),
            fontSize = 16.sp,
            textAlign = TextAlign.Center
        )
        Divider(color = Color.Gray, thickness = 1.dp)
        Text(
            "Another Text aligned to baseline",
            modifier = Modifier
                .fillMaxWidth()
                .paddingFromBaseline(top = 32.dp),
            fontSize = 16.sp,
            textAlign = TextAlign.Center
        )
    }
}

性能考虑因素

此Modifier在性能方面相对简单. 不过, 与任何填充一样, 过度使用可能会影响布局计算, 尤其是在复杂布局中.

潜在应用

表单布局 - 对齐表单中的标签, 使其看起来整洁有序.
列表项 - 确保列表项中的文本对齐, 尤其是当列表项的字体大小或样式各不相同时.
标题和内容对齐 - 按照设计指南对齐文章或卡片中的标题和内容文本.

它与 `.padding()` 有何不同?

Modifier.padding()--从可组合的边缘应用填充. 它会影响可组合元素外部的空间, 与内容类型无关.
Modifier.paddingFromBaseline()- 特别针对文本, 此Modifier从文本基线(即大多数字母所在的线条)开始应用填充. 这种类型的填充会调整文本起始处基线以上的空间.

9. `InteractionSource`

InteractionSource编程实践

概述

InteractionSource(非Modifier)用于跟踪和响应可组合元素的不同交互状态. 它尤其适用于定制用户交互反馈, 例如对触摸, 拖动或点击的视觉响应.

使用案例

自定义交互反馈 - 自定义 UI 元素如何在视觉上对按下, 拖动或聚焦等用户交互做出响应.
有状态的UI组件 - 创建可根据交互状态改变外观的组件, 增强用户体验.
可访问性增强 - 为可访问性目的提供额外反馈, 如焦点或选择的视觉提示.

**工作原理

创建一个 MutableInteractionSource 并将其传递给支持交互跟踪的组件.
InteractionSource可跟踪不同的交互状态, 这些状态可被收集并用于驱动 UI 更改.

示例

@Composable
fun InteractiveButtonExample() {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(
            onClick = { },
            interactionSource = interactionSource,
            colors = ButtonDefaults.buttonColors(
                containerColor = if (isPressed) Color.Gray else Color.Blue
            )
        ) {
            Text("Press Me")
        }
    }
}

性能考虑因素

高效管理 InteractionSource 非常重要. 避免直接在状态收集 lambdas 中进行复杂或繁重的计算.
将交互状态用于轻量级UI更改, 以确保响应迅速, 性能良好的用户体验.

潜在应用

交互组件 - 根据用户交互自定义按钮, 卡片或表单字段等组件的行为和外观.
手势的视觉反馈 - 在游戏或绘图工具等交互性更强的应用中, 为复杂的手势提供视觉反馈.
无障碍增强功能 - 针对焦点或选择提供清晰的视觉提示, 这对有无障碍需求的用户特别有帮助.

10. `Modifier.absoluteOffset()`

Modifier.absoluteOffset()编程实践

概述

Modifier.absoluteOffset()允许你以相对于原始位置的精确偏移来定位可组合元素. 与其他可能受布局方向(如 LTR 或 RTL)影响的偏移量Modifier不同, absoluteOffset以绝对 x 坐标和 y 坐标定位可组合元素, 而忽略布局方向.

使用案例

精确定位 - 无论布局方向如何, 都能将元素精确定位, 这对某些设计要求至关重要.
覆盖和浮动元素 - 创建需要定位在特定坐标上的覆盖组件, 如工具提示或自定义下拉菜单.
自定义动画和过渡 - 实现自定义动画, 使组件移动到屏幕上的特定点.

工作原理

absoluteOffset 接受 x 和 y 参数(作为 Dp 或返回 Dp 的 lambda 表达式)来设置可组合元素的偏移量.
偏移量是相对于可组合元素在布局中的原始位置而言的.

示例

在本例中, 两个 Box 可组合元素都水平移动了 20.dp. 但是, 由于 RTL 布局

带有 offset 的蓝色方框将向左移动.
带有 absoluteOffset 的红色方框将向右移动, 忽略 RTL 布局方向.
offset 通常用于希望UI尊重布局方向的情况, 这对于支持多语言和文化布局非常重要.
当你需要一个固定的, 与方向无关的位置时, 如特定动画, 重叠项目或自定义布局时, 可使用absoluteOffset, 因为在这些情况下, 相对于布局方向的位置并不重要.

@Composable
fun AbsoluteOffsetExample() {
    Row(
        modifier = Modifier
            .fillMaxSize()
            .padding(5.dp)
            .background(Color.DarkGray),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
            Box(
                modifier = Modifier
                    .size(200.dp)
                    .background(Color.Blue)
                    .offset(x = 40.dp) // This will move right in LTR, left in RTL
            ) {
                Text("This is normal offset", color = Color.White, fontSize = 32.sp)
            }

            Spacer(modifier = Modifier.width(16.dp))

            Box(
                modifier = Modifier
                    .size(200.dp)
                    .background(Color.Red)
                    .absoluteOffset(x = 20.dp) // This will always move right
            ) {
                Text("This is absolute offset", color = Color.White, fontSize = 32.sp)
            }
        }
    }
}

性能考虑因素

虽然 absoluteOffset 对定位很有效, 但过度使用(尤其是动态值)可能会因重新计算布局而导致性能开销.
最好在需要静态定位时使用, 如果使用动态偏移量, 则应有效地管理它们.

潜在应用

自定义布局设计 - 在自定义布局中定位元素, 传统布局结构无法满足要求.
交互式UI元素 - 在其他组件上放置徽章, 图标或自定义标记等元素.
自适应UI - 根据用户交互或应用状态动态调整元素的位置.

11. `Modifier.weight()`

.weight()编程实践

概述

将Modifier.weight()与fillMaxWidth()或fillMaxHeight()结合起来是 Jetpack Compose 中的一种常见模式, 尤其是在Row或Column中工作时. 这种组合可以实现灵活的布局, 让可组合元素按比例占据可用空间.

使用案例

比例大小 - 根据指定的重量比在Row或Column中分配可组合材料的空间.
响应式布局 - 通过动态调整可组合元素的大小, 创建适应不同屏幕尺寸或方向的UI.
平衡内容 - 确保为某些元素(如图片, 文本, 按钮)提供适当的相对空间.

工作原理

Modifier.weight()用于在Row或Column中分配一定比例的可用空间给所应用的可组合元素. 空间将根据其各自的权重在同级元素之间分配.
fillMaxWidth()或fillMaxHeight()可确保可组合元素填满其父级Row或Column中的最大宽度或高度.

示例

@Composable
fun WeightedRowExample() {
    Column(modifier = Modifier.fillMaxHeight()) {
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxSize()
                .background(Color.Green)
                .padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("Weight 1F", fontSize = 48.sp, fontWeight = FontWeight.ExtraBold)
        }
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxSize()
                .background(Color.Cyan)
                .padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("Weight 2F", fontSize = 48.sp, fontWeight = FontWeight.ExtraBold)
        }
    }
}

性能考虑因素

虽然使用 weight 对响应式设计很有效, 但在深嵌套布局中过度使用它可能会导致复杂的布局计算和性能问题.
确保结合使用 weight 和 fillMaxWidth/fillMaxHeight 能够满足布局要求, 并且不会导致不必要的布局开销.

潜在应用

灵活的UI面板 - 在带有边栏, 页眉或页脚的应用中, 你需要根据内容或屏幕尺寸灵活调整大小.
列表项 - 在自定义列表项中, 不同的元素应占据特定的空间.
仪表盘布局 - 用于需要按比例分配图表, 图形或数据面板空间的仪表盘或数据显示界面.

12. `Modifier.focusRequester()`

.focusRequester()编程实践

概述

FocusRequester允许你以编程方式请求可组合元素的焦点. 在更复杂的UI中, 默认焦点顺序可能不够充分, 或者由于用户交互或应用逻辑而需要特定焦点控制时, 它在管理焦点行为方面尤其有用.

使用案例

程序焦点控制 - 根据事件直接设置特定组件的焦点, 例如在显示屏幕时将焦点移至文本字段.
自定义键盘导航 - 以非线性顺序或根据特定用户操作管理键盘导航.
改进可访问性 - 确保焦点以上下文相关的方式指向重要元素, 从而增强可访问性.

工作原理

创建FocusRequester并将其附加到可组合元素上. 然后就可以用它来以编程方式请求该可组合元素的焦点.
你可以创建多个 FocusRequester 实例来管理多个可组合元素的焦点.

示例

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FocusRequesterExample() {
    val focusRequester = FocusRequester()
    val focusRequester2 = FocusRequester()

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        TextField(
            value = "Field 1",
            onValueChange = {},
            modifier = Modifier
                .focusRequester(focusRequester)
        )
        TextField(
            value = "Field 2",
            onValueChange = {},
            modifier = Modifier
                .focusRequester(focusRequester2)
        )
        Button(onClick = { focusRequester.requestFocus() }) {
            Text("Focus First Field")
        }
        Button(onClick = { focusRequester2.requestFocus() }) {
            Text("Focus Second Field")
        }
    }
}

性能考虑因素

虽然 FocusRequester 是一个功能强大的焦点控制工具, 但要明智地使用它, 以保持UI的直观性和可访问性.
避免焦点管理中不必要的复杂性, 因为这会导致用户的导航混乱.

潜在应用

表单和输入字段 - 自动将焦点设置到表单中的第一个输入字段, 或根据用户输入管理字段之间的焦点转换.
动态UI和对话框 - 在动态变化的界面或模式对话框中将焦点转移到相关组件.
游戏UI和交互式元素 - 在游戏界面或其他交互式元素中管理焦点, 在这些界面或元素中需要通过编程控制焦点, 以增强用户体验.

13. `Modifier.nestedScroll()`

.nestedScroll()编程实践

概述

Modifier.nestedScroll()是一个Jetpack Compose Modifier, 可以在UI中启用嵌套滚动行为. 它在可滚动组件嵌套在其他组件中的复杂布局中特别有用, 例如在可垂直滚动页面中的可滚动列表.

使用案例

嵌套式可滚动布局 - 在可滚动组件嵌套的UI中管理滚动行为, 例如在垂直可滚动列内的 LazyColumn.
协调滚动 - 创建多个可滚动区域协调滚动的效果, 例如当你滚动浏览列表时, 标题会折叠.
自定义滚动行为 - 实现与滚动相关的自定义交互, 这些交互取决于嵌套的可滚动组件的滚动位置或状态.

工作原理

nestedScroll连接嵌套的可滚动组件, 允许它们交流滚动状态并协调行为.
它与 NestedScrollConnection 结合使用, 后者定义了嵌套滚动组件之间的交互方式.

示例

@Composable
fun NestedScrollWithCollapsibleHeader() {
    // header height
    val headerHeight = remember { mutableStateOf(150.dp) }
    // adjust the header size based on scroll
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                val delta = available.y
                val newHeight = headerHeight.value + delta.dp
                headerHeight.value = newHeight.coerceIn(50.dp, 150.dp)
                return Offset.Zero // Consuming no scroll
            }
        }
    }

    Box(modifier = Modifier
        .fillMaxSize()
        .nestedScroll(nestedScrollConnection)) {
        Column {
            Box(
                modifier = Modifier
                    .height(headerHeight.value)
                    .fillMaxWidth()
                    .background(Color.LightGray)
            ) {
                Text("Collapsible Header", Modifier.align(Alignment.Center))
            }
            LazyColumn {
                items(100) { index ->
                    Text("Item $index", modifier = Modifier.padding(16.dp))
                }
            }
        }
    }
}

说明

我们有一个作为可折叠页眉的Box. 它的高度由 headerHeight 状态控制.
NestedScrollConnection用于根据来自LazyColumn的滚动事件修改headerHeight. 当你向下滚动时, 页眉会折叠(高度降低).
LazyColumn包含一个项目列表. 当滚动时, 它会触发NestedScrollConnection中的onPreScroll, 从而影响页眉的高度.
这里关键的一点是, LazyColumn的滚动如何影响另一个组件(页眉)的大小. 这种相互关联的行为就是嵌套滚动的定义.

性能考虑因素

嵌套滚动可能很复杂, 而且可能会影响性能, 尤其是大型或深度嵌套滚动区域.
确保嵌套滚动逻辑经过优化, 不会导致不必要的布局重新计算或滚动不流畅.

潜在应用***

复杂的UI结构 - 在具有复杂UI结构的应用中, 屏幕的不同部分需要以协调的方式滚动.
可折叠工具栏 - 实现可折叠工具栏或对滚动事件做出反应的标题等UI模式.
交互式仪表盘 - 创建不同部分滚动但相互关联的仪表盘, 例如同步滚动位置.

展望未来

高级Modifier之旅不会就此结束. 随着工具包的不断发展, 创建更具创新性和用户友好界面的机会也会越来越多. 我相信我这篇文章甚至还没有触及到创建精美体验的大量可用选项的表面.

让我们继续尝试, 学习和分享使用这些先进工具的经验, 不断突破UI开发的极限. 无论你是要创建一个简单的应用还是一个复杂的交互体验, 这些高级Modifier的知识无疑将成为你开发人员工具包中的宝贵财富.

对Jetpack Compose Modifier的全面且深入的探索

有哪些高级且鲜为人知的Modifier能为你的UI做些什么？- 对Jetpack Compose Modifier的全面探索

Jetpack Compose 中 Modifier 的高级和常用方法之旅

简介

1. Modifier.graphicsLayer

概述

使用案例

示例

性能考虑因素

2. Modifier.drawWithCache

概述

使用案例

工作原理

示例

说明

性能考虑因素

潜在应用

3. Modifier.onSizeChanged

概述

使用案例

工作原理

示例

说明

性能注意事项

潜在应用

4. Modifier.onPlaced

概述

使用案例

工作原理

示例

说明

潜在应用

性能考虑因素

?? 用 onGloballyPositioned 代替如何?

a) 相对定位与全局定位-

b) 使用案例

c) 性能考虑因素

5. Modifier.zIndex()

概览

使用案例

工作原理

示例

性能考虑因素

潜在应用*

6. Modifier.onKeyEvent

概述

使用案例

工作原理

示例

性能考虑因素

潜在应用

7. Modifier.clipToBounds()

概述

使用案例

工作原理

示例

性能考虑因素

潜在应用*

8. Modifier.paddingFromBaseline()

概述

使用案例

工作原理

示例

性能考虑因素

潜在应用

它与 .padding() 有何不同?

9. InteractionSource

概述

使用案例

**工作原理

示例

性能考虑因素

潜在应用

10. Modifier.absoluteOffset()

概述

使用案例

工作原理

示例

性能考虑因素

潜在应用

1. `Modifier.graphicsLayer`

2. `Modifier.drawWithCache`

3. `Modifier.onSizeChanged`

4. `Modifier.onPlaced`

?? 用 `onGloballyPositioned` 代替如何?

5. `Modifier.zIndex()`

6. `Modifier.onKeyEvent`

7. `Modifier.clipToBounds()`

8. `Modifier.paddingFromBaseline()`

它与 `.padding()` 有何不同?

9. `InteractionSource`

10. `Modifier.absoluteOffset()`

11. `Modifier.weight()`

12. `Modifier.focusRequester()`

13. `Modifier.nestedScroll()`