Jetpack Compose 修饰符

借助修饰符,您可以修饰或扩充可组合项。您可以使用修饰符来执行以下操作:

  • 更改可组合项的大小、布局、行为和外观
  • 添加信息,如无障碍标签
  • 处理用户输入
  • 添加高级互动,如使元素可点击、可滚动、可拖动或可缩放

修饰符是标准的 Kotlin 对象。您可以通过调用某个 Modifier 类函数来创建修饰符:

kotlin 复制代码
@Preview
@Composable
fun ModifierPage(navController: NavHostController?= null) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Modifier 修饰符")
                },
                navigationIcon = {
                    IconButton(onClick = { navController?.popBackStack() }) {
                        Icon(Icons.Filled.ArrowBack,"")
                    }
                }
            )
        }
    ) { padding ->
        Column(modifier = Modifier.padding(padding)) {
            Box(Modifier.background(color = MaterialTheme.colors.primary)) {
                Column(modifier = Modifier
                    .padding(24.dp)
                ) {
                    Text(text = "Hello,", color = Color.White)
                    Text(text = "Android", color = Color.White)
                }
            }
        }
    }
}

您可以将以下函数连在一起以将其组合起来:

kotlin 复制代码
...
    Column(modifier = Modifier
        .padding(24.dp)
        .fillMaxWidth()) {
        Text(text = "Hello,", color = Color.White)
        Text(text = "Android", color = Color.White)
    }
...

请注意,在上面的代码中,结合使用了不同的修饰符函数。

  • padding 在元素周围留出空间。
  • fillMaxWidth 使可组合项填充其父项为它提供的最大宽度。

最佳实践是让所有可组合项都接受 modifier 参数,并将该修饰符传递给其发出界面的第一个子项。

修饰符顺序很重要

修饰符函数的顺序非常重要 。由于每个函数都会对上一个函数返回的 Modifier 进行更改,因此顺序会影响最终结果。让我们来看看这方面的一个示例:

下图是修饰符先执行 clickable 后执行 padding 的效果

对应代码( 注意 6、7 行的顺序 )

kotlin 复制代码
Row(
    modifier = Modifier.border(border = BorderStroke(
                width = 1.dp,color = Color.Black),
               shape = RectangleShape
        )
        .clickable(onClick = {})
        .padding(16.dp)
        .fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
) {
    Image(
        modifier = Modifier
            .size(50.dp) // 设置图片大小
            .clip(CircleShape), // 裁剪为圆形
        contentScale = ContentScale.Crop, // 裁剪图片以适应大小
        contentDescription = "Artist image",
        painter = painterResource(id = R.drawable.avatar)
    )
    Column(modifier = Modifier.padding(start = 15.dp)) {
        Text("码农宝")
        Text("3分钟前")
    }
}

下图是修饰符先执行 padding 后执行 clickable 的效果

kotlin 复制代码
Row(
    modifier = 
        .padding(16.dp)
        .clickable(onClick = {})
        
) {
    ...
}

padding 和 size

默认情况下,Compose 中提供的布局会封装其子项。但是,您可以使用 size 修饰符设置尺寸:

kotlin 复制代码
Row(
    modifier = Modifier
        .size(width = 300.dp, height = 100.dp)
       ...
    ,    
) {
    ...
}
相关推荐
LiuYaoheng3 分钟前
【Android】布局优化:include、merge、ViewStub的使用及注意事项
android·java
Kapaseker40 分钟前
Kotlin Flow 的 emit 和 tryEmit 有什么区别
android·kotlin
好好学习啊天天向上1 小时前
Android Studio 撕开安卓手机投屏
android·智能手机·android studio
Android-Flutter2 小时前
android - JPG图片转换HDR图片,heic格式
android
诸神黄昏EX10 小时前
Android Build系列专题【篇四:编译相关语法】
android
雨白12 小时前
优雅地处理协程:取消机制深度剖析
android·kotlin
leon_zeng012 小时前
更改 Android 应用 ID (ApplicationId) 后遭遇记
android·发布
2501_9160074714 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
Jeled15 小时前
Retrofit 与 OkHttp 全面解析与实战使用(含封装示例)
android·okhttp·android studio·retrofit
ii_best18 小时前
IOS/ 安卓开发工具按键精灵Sys.GetAppList 函数使用指南:轻松获取设备已安装 APP 列表
android·开发语言·ios·编辑器