【Compose multiplatform教程12】【组件】Box组件

查看全部组件文章浏览阅读493次,点赞17次,收藏11次。alignment。https://blog.csdn.net/b275518834/article/details/144751353

Box

功能说明:简单的布局组件,可容纳其他组件,并依据alignment属性精确指定内部组件的对齐方式,实现灵活多变的布局效果,适用于对组件位置有特定要求的场景。

示例场景:将一个小图标和一段文字在水平方向上居中对齐,放置在屏幕的特定区域,如在一个提示框中,图标和文字组合显示。

Kotlin 复制代码
package org.lxz.project.compose.demo

import androidx.compose.foundation.layout.*
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocal
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.*
import kotlinmultiplatform.composeapp.generated.resources.Res
import kotlinmultiplatform.composeapp.generated.resources.ic_launcher
import org.jetbrains.compose.resources.InternalResourceApi

object BoxDemo {

    @OptIn(InternalResourceApi::class)
    val imageVector = Icons.Filled.AccountBox
//    val imageVector = Icons.Filled.Search

    // 定义一个CompositionLocal,用于方便在不同地方获取统一的布局配置,例如间距等属性
    val LocalBoxPadding: CompositionLocal<Dp> = staticCompositionLocalOf { 20.dp }

    // 定义一个可配置的文本样式,方便统一设置文字相关属性
    @Immutable
    data class TextStyleConfig(
        val fontSize: Dp = 16.dp,
        val color: Color = Color.Black
    )

    // 定义一个可配置的图标样式,方便统一设置图标相关属性
    @Immutable
    data class IconStyleConfig(
        val size: Dp = 30.dp,
        val paddingEnd: Dp = 10.dp
    )

    // 用于创建带有图标和文字的Box布局的函数,接收相应配置参数
    @Composable
    fun createDefaultBox() {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        )
        {
            createBoxWithIconAndText(
                text = "这是垂直图标的文字Box的组件",
                iconStyleConfig = IconStyleConfig(size = 40.dp, paddingEnd = 1.dp),
                textStyleConfig = TextStyleConfig(fontSize = 20.dp, color = androidx.compose.ui.graphics.Color.Red),
                isVertical = true

            )
            createBoxWithIconAndText(
                text = "这是水平图标的文字Box的组件",
                iconStyleConfig = IconStyleConfig(size = 40.dp, paddingEnd = 1.dp),
                textStyleConfig = TextStyleConfig(fontSize = 20.dp, color = androidx.compose.ui.graphics.Color.Red),
                isVertical = false
            )
        }
    }

    @Composable
    fun createBoxWithIconAndText(
        text: String,
        iconStyleConfig: IconStyleConfig = IconStyleConfig(),
        textStyleConfig: TextStyleConfig = TextStyleConfig(),
        modifier: Modifier = Modifier,
        isVertical: Boolean = true
    ) {

        Box(
            modifier = modifier
                .width(350.dp)
                .height(100.dp)
                .padding(LocalBoxPadding.current),
//            contentAlignment = Alignment.Center
        ) {
            Icon(
                imageVector = imageVector,
                contentDescription = "示例图标",
                modifier = Modifier
                    .size(iconStyleConfig.size)
                    .align(
                        if (isVertical) {
                            Alignment.TopCenter
                        } else {
                            Alignment.CenterStart
                        }
                    )
            )

            Text(
                text = text,
                style = TextStyle(
                    fontSize = TextUnit(textStyleConfig.fontSize.value, TextUnitType.Sp),
                    color = textStyleConfig.color
                ),
                modifier = Modifier
                    .align(
                        if (isVertical) {
                            Alignment.BottomCenter
                        } else {
                            Alignment.CenterEnd
                        }
                    )
            )
        }

    }
}

运行效果:

相关推荐
「、皓子~17 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了20 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_22 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术37 分钟前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
Try0211 小时前
Kotlin中Lambda表达式妙用:超越基础语法的力量
kotlin
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js