Compose中常用的一些Modifier的扩展ui方法记录

已于 2023-07-22 13:27:44 修改
阅读量727 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Compose使用 文章标签： ui compose 扩展
于 2023-07-22 13:26:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Tobey_r1/article/details/131865619

Compose中常用的一些Modifier的扩展ui方法记录

关于

  本篇主要记录一些开发中可能用到的常用方法的扩展记录，包括防快速带点击，画虚实线divider，画虚线边框，绘制阴影等。

防快速点击

inline fun Modifier.singleClickable(
    debounceDuration: Long = 400L,
    enabled: Boolean = true,//中间这三个是clickable自带的参数
    rippleEnabled: Boolean = true, //是否开启水波纹
    onClickLabel: String? = null,
    role: Role? = null,
    crossinline onClick: () -> Unit
): Modifier = composed {
   
   
    var lastClickTime by remember {
   
    mutableStateOf(value = 0L) }
    val eventAction: () -> Unit = {
   
   
        val currentTimeMillis = System.currentTimeMillis()
        if (currentTimeMillis - debounceDuration >= lastClickTime) {
   
   
            onClick()
            lastClickTime = currentTimeMillis
        }
    }
    if (rippleEnabled) {
   
   
        clickable(enabled, onClickLabel, role, eventAction)
    } else {
   
   
        clickable(
            interactionSource = NoRippleInteractionSource(),
            indication = null,
            enabled = enabled,
            onClickLabel = onClickLabel,
            role = role,
            onClick = eventAction
        )
    }
}

class NoRippleInteractionSource : MutableInteractionSource {
   
   

    override val interactions: Flow<Interaction> = emptyFlow()

    override suspend fun emit(interaction: Interaction) {
   
   }

    override fun tryEmit(interaction: Interaction) = true

}

虚实分割线


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
Android开发之Compose基础学习-Divider分割线控件的基本用法

				
			

			

				

					xiayiye5的博客
				

				

					09-18
					
					1374
					
				

			

		

		

			
				
【代码】Android开发之Compose基础学习-Divider分割线控件的基本用法。

			
		

	



                

            
              



	

		

			

				
					
Jetpack Compose中的Modifier

				
			

			

				

					川峰的博客
				

				

					12-16
					
					2164
					
				

			

		

		

			
				
Modifier修饰符是Jetpack Compose中用来修饰组件的，提供常用的属性，写布局时几乎所有Composable组件的大部分属性都可以用Modifier 来修饰。官方在开发Compose UI时，最初尝试过将所有属性全部以函数参数的形式提供，但是那样太多了，他们也尝试过像Flutter那样的方式，将属性也作为一个组件进行嵌套，但这样又很容易让人感到困惑，所以才诞生了Modifier，将大部分组件常用属性封装成Modifier的形式来提供，哪个组件需要就在哪个组件上应用。 

			
		

	



              


  
              

                


	

		

			

				
					
Compose - 修饰符 Modifier

				
			

			

				

					HugMua的博客
				

				

					08-18
					
					1492
					
				

			

		

		

			
				
/自定义测量和摆放//TODO...//去掉涟漪效果clickable(写法过于底层，基本没有太多场景我们需要使用。启动协程作用域): R等待用户输入事件。

			
		

	





	

		

			

				
					
实战！如何在 Jetpack Compose 中拥有一个与众不同的 Modifier

				
			

			

				

					datian1234的博客
				

				

					06-15
					
					674
					
				

			

		

		

			
				
相信大家既然已经学习了Compose，那想必也非常熟悉如何使用 Modifer 了，由于Compose 被Android 团推设计的非常容易上手，所以有不了解如何使用的朋友可以去看看 [文档]

			
		

	



		

			
		



	

		

			

				
					
Jetpack Compose 从入门到入门（六）

				
			

			

				

					唯鹿的博客
				

				

					04-30
					
					2572
					
				

			

		

		

			
				
本篇说说Compose中的Canvas。
1. Canvas
@Composable
fun Canvas(
	modifier: Modifier,
	onDraw: DrawScope.() -> Unit
) = Spacer(modifier.drawBehind(onDraw))


modifier：这里主要作用是指定画布的大小。
onDraw就是执行具体的绘制。可以看到它提供了一个绘图环境的作用域 DrawScope，这里提供有我们经常使用的绘图api和属性，比如drawLine、siz

			
		

	





	

		

			

				
					
Android Jetpack Compose之轻松添加分隔线：Divider组件

				
			

			

				

					江小白的博客
				

				

					06-26
					
					2647
					
				

			

		

		

			
				
在深入了解Divider之前，我们首先简单回顾一下Jetpack Compose。Jetpack Compose是一个现代化的，充满活力的Android UI工具包，允许开发者使用Kotlin语言以声明式方式构建应用程序的界面。这意味着您只需要描述UI应该如何展示，而不是描述它的变化过程。颜色（Color）：这会改变分隔线的颜色。默认情况下，颜色是一种灰色。厚度（Thickness）：这会改变分隔线的厚度。默认情况下，厚度是1dp。开始填充（Start Padding）和结束填充（End Padding）

			
		

	





	

		

			

				
					
Jetpack Compose 深入探索系列四： Compose UI

				
			

			

				

					川峰的博客
				

				

					03-01
					
					3218
					
				

			

		

		

			
				
Compose UI 是一个 Kotlin 多平台框架。它提供了通过可组合函数发出 UI 的构建块和机制。除此之外，这个库还包括 Android 和 Desktop 源代码，为 Android 和 Desktop 提供集成层。当使用 Compose runtime 集成 UI 时，目标是构建用户可以在屏幕上体验的布局树。这个树是通过执行发出 UI 的 Composable 函数来创建和更新的。用于树的节点类型只有 Compose UI 知道，所以 Compose runtime 可以不知道它。即使 Comp

			
		

	





	

		

			

				
					
Android开发实战班 - 现代 UI 开发之 Modifier 全面应用

				
			

			

				

					知道者
				

				

					11-20
					
					1007
					
				

			

		

		

			
				
什么是 ModifierModifier 是 Jetpack Compose 中用于修饰和定制 Compose 组件的对象。通过 Modifier，可以调整组件的布局、样式、交互行为、动画效果等。Modifier 的优势声明式: Modifier 使用声明式语法，代码简洁易读。组合性: 可以将多个 Modifier 组合在一起，实现复杂的 UI 定制。复用性: 可以将常用的 Modifier 封装起来，提高代码复用性。灵活性。

			
		

	





	

		

			

				
					
深入探索 Compose 渲染流程：从 UI 树到 Skia 绘制的实现解析

				
			

			

				

					weixin_44780781的博客
				

				

					12-08
					
					1517
					
				

			

		

		

			
				
在现代 Android 应用中，Jetpack Compose 提供了一个声明式的 UI 构建框架。Compose 将界面定义为一个个 @Composable 函数，并通过这些函数创建 UI 元素。为了高效地渲染这些界面，Compose 将 UI 树转化为 Skia 渲染引擎的绘制指令，最终在屏幕上呈现出来。本文将通过源码解析 Compose 到 Skia 的渲染过程，帮助开发者理解这一渲染机制，并掌握如何优化界面更新。Compose UI 描述（声明式 UI）

			
		

	





	

		

			

				
					
Jetpack-Compose 学习笔记（三）—— Compose 的自定义“View”

				
			

			

				

					修之竹的博客
				

				

					09-13
					
					2885
					
				

			

		

		

			
				
在上一篇中，我们不仅了解了 Compose 中的 Column、Row、Box 等几种常见的布局方式 还学习了 CompositionLocal 类在 Compose 中进行传值的方法；还有可快速搭建 App 结构的 Scaffold 脚手架组件，顺便学习了 Surface、Modifier 的一些使用，还有 ConstraintLayout 在Compose 中的使用方法。虽然官方提供了这么多 Compose 组件，但在实际需求开发中，定制化组件仍然必不可少。
在传统的 View 体系中，系统为开发者提供

			
		

	





	

		

			

				
					
使用Android Jetpack Compose渲染效果打造酷炫的动画效果

				
			

			

				

					虎哥LoveDroid
				

				

					11-07
					
					2862
					
				

			

		

		

			
				
RenderEffect允许你向UI组件应用视觉效果。这些效果可以包括模糊、自定义着色器或者你能想象到的任何其他视觉转换。然而，RenderEffect仅适用于API 31及以上版本。在我们的示例中，我们将使用RenderEffect为我们的可扩展浮动按钮和一些额外组件创建模糊和着色器效果。

			
		

	





	

		

			

				
					
Compose：Modifier、CombinedModifier 和 ComposedModifier

				
			

			

				

					Vincent的博客
				

				

					11-05
					
					423
					
				

			

		

		

			
				
Compose Modifier

			
		

	





	

		

			

				
					
Jetpack Compose 自定义绘制——高仿Keep周运动数据页面

				
			

			

				

					FunnySaltyFish's Blog
				

				

					05-30
					
					903
					
				

			

		

		

			
				
废话之前先上图吧，如果不是有人告诉，你可以一眼看出哪个是真哪个是假吗？

仿制整个页面（仅仅页面）大概花了我两个小时，不过仅仅是静态的、不可点击的。图有形似而无功能。
自定义绘制
Jetpack Compose 自定义绘制的文章其实并不少了，基本代码上和View体系基本类似，就是方法上有所差异
详细的内容可以见其他作者的文章，如

路很长OoO的JetPack-Compose - 自定义绘制 - 掘金 (juejin.cn)
RugerMc的使用 Jetpack Compose 完成自定义绘制 - 掘金 (

			
		

	





	

		

			

				
					
android虚线边框_android 绘制虚线效果

				
			

			

				

					weixin_39918690的博客
				

				

					12-19
					
					1073
					
				

			

		

		

			
				
有的时候我们需要一种虚线效果，比如图片的边框，愤怒的小鸟的飞翔路径，那么怎么绘制这些虚线呢？方法很多，目前我觉得好的有两种：一、自己创建模式，一个点一个点的绘制。二、用Android提供的 DashPathEffect 类来创建模式绘制。下面我要演示的就是第二种方法，用Android提供给我的API来绘制。由于是开发项目的一个小块，下面只能给出部分截图：效果如上面。下面看一下核心绘图代码：publ...

			
		

	





	

		

			

				
					
android canvas_Android自定义View之绘制虚线

				
			

			

				

					weixin_39622399的博客
				

				

					11-27
					
					521
					
				

			

		

		

			
				
开发中遇到需要画虚线，我们首先就会想到ShapeDrawable，在布局中加一个View，并给它添加一个虚线背景，是挺简单的。    android:shape="line">                android:dashGap="4dp"        android:dashWidth="8dp"        android:width="1dp"        a...

			
		

	





	

		

			

				
					
PathComposePathEffectView  使用

				
			

			

				

					男儿不展风云志，空有天生八尺躯
				

				

					04-25
					
					301
					
				

			

		

		

			
				
public class PathComposePathEffectView extends View {
    private Paint mPaint;

    private Path mPath;
    private PathEffect comPathEffect;
    private PathEffect cornerPathEffect;
    private PathEffect dashPathEffect;

    private PathMeasure mPathMea

			
		

	





	

		

			

				
					
android中画虚线--.PathEffect类简单认识

				
			

			

				

					
				

				

					04-16
					
					476
					
				

			

		

		

			
				
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setStyle(Style.STROKE);
p.setColor(Color.WHITE);
p.setStrokeWidth(1);
PathEffect effects = new DashPathEffect(new float[] { 1, 2, 4, 8}, 1);
p.setPat...

			
		

	





	

		

			

				
					
Jetpack-Compose-自定义绘制

				
			

			

				

					Stay hungry, stay foolish!!
				

				

					03-10
					
					4861
					
				

			

		

		

			
				
上节课我们简单的利用了一下自定义裁剪和自定义就能玩出如下简单案例,效果不错。这节课咋们来看看Compose自定义绘制能不能花里胡哨。


一、Compose自定义

自定义,一个应用的可创造性往往离不开人们的千奇百怪想象和用户变化万千的需求。自定义就是提供了移动端的可创造性。如果Compose没有了自定义那就没有了创造性。自定义不熟悉的看我之前的博客。

    1.Android自定义-曲线渐变填充
    2.Androi.

			
		

	





	

		

			

				
					
android虚线边框_Android自定义View之绘制虚线

				
			

			

				

					weixin_39777213的博客
				

				

					12-19
					
					1097
					
				

			

		

		

			
				
老实说，第一次看到这个需求的时候，第一反应就是Canvas只有drawLine方法，并没有drawDashLine方法啊！这咋整啊，难道要我自己做个遍历不断的drawLine？不到1秒，我就放弃这个想法了，因为太恶心了。方法肯定是有的，只不过我不知道而已。最简单的方法是利用ShapeDrawable，比如说你想用虚线要隔开两个控件，就可以在这两个控件中加个View，然后给它个虚线背景。嗯，理论上就...

			
		

	





	

		

			

				
					
android compose Modifier

					
最新发布

				
			

			

				

					06-12
				

			

		

		

			
				
<think>我们正在讨论AndroidCompose中的Modifier用法。根据之前的对话，用户想了解Modifier的使用示例或相关问题。虽然提供的引用是关于Vue和GitLab的，但我们可以忽略这些，专注于Compose的Modifier。在AndroidJetpackCompose中，Modifier是一个非常重要的概念，用于修饰组件的各个方面，例如大小、布局、行为等。下面给出一些常见的Modifier用法示例：1.设置组件大小：Modifier.size(100.dp)2.设置边距：Modifier.padding(8.dp)3.设置背景：Modifier.background(Color.Blue)4.点击事件：Modifier.clickable{...}5.设置形状：Modifier.clip(RoundedCornerShape(8.dp))6.设置边框：Modifier.border(2.dp,Color.Red,RoundedCornerShape(8.dp))7.设置透明度：Modifier.alpha(0.5f)8.设置滚动：Modifier.verticalScroll(rememberScrollState())此外，Modifier可以链式调用，例如：```kotlinModifier.padding(16.dp).size(100.dp).background(Color.Green).clickable{onClick()}```注意：在使用Modifier时，顺序非常重要，因为每个修饰符都会对上一个修饰符处理后的组件进行进一步修改。例如，padding然后background和background然后padding的效果是不同的。常见问题：1.Modifier的顺序错误导致UI效果不符合预期。2.重复使用同一个Modifier属性（例如设置两次大小）可能导致冲突。下面是一个完整的Compose函数示例，展示了一个按钮的Modifier使用：```kotlin@ComposablefunMyButton(onClick:()->Unit){Button(onClick=onClick,modifier=Modifier.padding(16.dp)//外边距.background(Color.Blue)//背景色.padding(8.dp)//内边距（背景色会覆盖到内边距，但内边距内的内容不会覆盖背景色？注意：这里的顺序是先背景后内边距，背景色会延伸到内边距，但是内容区域是内边距内部）.clip(RoundedCornerShape(8.dp))//裁剪圆角){Text(text="Clickme",color=Color.White)}}```注意：上面的示例中，背景色会应用到整个区域（包括第一个padding），然后第二个padding会在背景色的内部添加内边距。但是，实际上，由于背景修饰符在第二个padding之前，所以背景色会延伸到第二个padding的区域（也就是背景色会覆盖到第一个padding和第二个padding之间的区域）。如果我们希望背景色只在内边距内部，那么应该调整顺序：正确顺序应该是：先设置内边距，然后背景色，再设置其他修饰符。例如：```kotlinModifier.padding(16.dp)//外部边距.background(Color.Blue)//背景色覆盖整个外部边距内部的区域.padding(8.dp)//内部边距，背景色不会覆盖这个内部边距的区域（因为背景色已经设置过了，所以内部边距的区域是背景色的内部，不会有背景色）```但实际上，背景色会覆盖在它之前的修饰符所定义的空间（包括之前的所有padding），而之后的内边距会在背景色的基础上再增加内边距。所以，背景色覆盖的区域包括第一个padding的内部区域，然后第二个padding会在背景色的内部增加空白。我们通常希望的是背景色只覆盖内容区域和内部边距？这其实是误解。正确的理解是：修饰符按照顺序应用，每次修饰符都在上一个修饰符处理后的结果上添加效果。对于上面的例子，我们希望的是：按钮有一个蓝色的背景，并且有圆角，同时按钮外部有16dp的边距，按钮内部文字周围有8dp的内边距。那么正确的顺序应该是：1.首先设置外部边距（16dp）-这会在按钮外部空出16dp2.然后设置背景色和圆角，这样背景色就会填充外部边距以内的整个区域（包括后面的内边距）3.然后设置内边距（8dp）-这样在背景色内，内容周围就会有8dp的空白所以上面的顺序是正确的。如果顺序反过来：```kotlinModifier.padding(8.dp).background(Color.Blue).padding(16.dp)```那么：先有一个8dp的内边距，然后背景色会覆盖整个区域（包括8dp内边距的区域），然后再加上16dp的内边距，这样背景色就会在8dp+16dp内边距的内部，而外部16dp的区域是透明的（无背景色）。因此，通常的规则是：外部的修饰符先影响后面的修饰符，后面的修饰符是在前面修饰符改变后的布局上再改变。综上所述，我们给出一个更清晰的示例：参考文档：[Compose文档](https://developer.android.com/jetpack/compose/modifiers)中关于修饰符顺序的说明。现在，根据用户要求，提供一些使用示例和常见问题解决方案。常见问题1：如何在Modifier中同时使用clickable和background？回答：按照顺序，clickable应该放在background之前还是之后？如果clickable放在background之后，那么点击区域包括整个背景区域。如果放在之前，那么点击区域同样包括整个背景区域。所以顺序在这里可能不重要？但实际情况中，有些效果（比如Ripple效果）需要Modifier.clickable来提供，而background只是视觉上的。因此，通常我们这样写：```kotlinModifier.background(Color.Blue).clickable{onClick()}```问题2：如何设置组合Modifier？例如，我们有多个Modifier对象，如何将它们组合？可以使用`.then()`方法。```kotlinvalmodifier1=Modifier.padding(16.dp)valmodifier2=Modifier.background(Color.Red)valcombinedModifier=modifier1.then(modifier2)```问题3：如何自定义Modifier？我们可以通过扩展函数创建自定义的Modifier，例如：```kotlinfunModifier.customModifier(/*参数*/):Modifier=this.then(//例如，我们可以创建一个点击多次才会响应的Modifier，这需要记住状态，这里简单示例Modifier.clickable(enabled=true,onClick={/*自定义行为*/}))```最后，我们给出一个包含多个Modifier的示例：```kotlin@ComposablefunExampleComposable(){Column(modifier=Modifier.fillMaxSize().padding(16.dp).verticalScroll(rememberScrollState())){Text(text="Hello,Compose!",modifier=Modifier.padding(bottom=8.dp).background(Color.LightGray).padding(8.dp))Button(onClick={/*dosomething*/},modifier=Modifier.fillMaxWidth().background(Color.Green,shape=RoundedCornerShape(8.dp)).padding(vertical=16.dp)){Text("Submit")}}}```希望这些示例能够帮助用户理解Modifier的用法。注意：以上代码示例仅供参考，实际使用时可能需要根据具体需求调整。相关问题：1.Modifier在Compose中的执行顺序是如何的？2.如何解决Modifier导致的布局错误？3.如何创建自定义的Modifier？4.Modifier的作用域有哪些限制？5.如何使用Modifier控制手势？</think>
### Android Compose Modifier 用法详解与示例

在 Jetpack Compose 中，`Modifier` 是用于修改 UI 组件外观、布局和行为的核心工具。以下是关键用法和常见场景：

#### 🎨 基础用法示例
1. **尺寸和布局修饰**
```kotlin
Box(
    modifier = Modifier
        .size(200.dp)   // 固定尺寸
        .padding(16.dp) // 内边距
        .clip(RoundedCornerShape(8.dp)) // 圆角裁剪
        .border(2.dp, Color.Blue) // 边框
        .background(Color.LightGray) // 背景色
) { ... }
```

2. **交互修饰符**
```kotlin
Text(
    text = "点击我",
    modifier = Modifier
        .clickable { showToast() } // 点击事件
        .hoverable { isHovered = it } // 悬停状态
        .focusable() // 焦点控制
)
```

3. **手势修饰符**
```kotlin
Box(
    modifier = Modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onLongPress = { /* 长按处理 */ },
                onDoubleTap = { /* 双击处理 */ }
            )
        }
)
```

#### 🔧 高级特性
1. **链式顺序影响效果**
```kotlin
// 顺序1：背景在padding后应用（仅内容区有背景）
Modifier.padding(16.dp).background(Color.Red) 

// 顺序2：背景在padding前应用（包含边距区域）
Modifier.background(Color.Red).padding(16.dp) 
```

2. **组合修饰符**
```kotlin
val baseModifier = Modifier.fillMaxWidth().padding(8.dp)

Column(modifier = baseModifier.then( 
    if (isExpanded) Modifier.height(200.dp) 
    else Modifier.wrapContentHeight()
)) { ... }
```

#### ⚠️ 常见问题解决
1. **修饰符冲突**  
当多个尺寸修饰符冲突时（如同时使用 `size()` 和 `fillMaxSize()`），Compose 遵循布局优先级规则[^1]，建议：
```kotlin
Modifier
    .fillMaxWidth(0.8f)  // 优先级低于具体尺寸
    .requiredWidth(200.dp) // 强制宽度
```

2. **嵌套滚动冲突**  
使用 `nestedScroll` 修饰符协调父/子滚动：
```kotlin
val nestedScrollConnection = remember { ... }
LazyColumn(
    modifier = Modifier.nestedScroll(nestedScrollConnection)
)
```

3. **自定义修饰符**  
实现 `LayoutModifier` 创建高级效果：
```kotlin
fun Modifier.customFade() = composed {
    val alpha by animateFloatAsState(...)
    this.alpha(alpha)
}
```

#### 💡 性能优化技巧
- 使用 `ComposedModifier` 避免重组时重复计算
- 复杂修饰符（如 `graphicsLayer`）应添加 `clipping` 限制重绘区域[^2]
- 利用 `Modifier.pointerInput(key)` 控制手势监听的重启条件

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
雪の星空朝酱

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值