【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
                        }
                    )
            )
        }

    }
}

运行效果:

相关推荐
VillenK2 分钟前
vban2.0中table的使用
前端·vue.js
Dolphin_海豚5 分钟前
vapor 中的 ast 是如何被 transform 到 IR 的
前端·vue.js·源码
Jimmmmmmm40 分钟前
pnpm如何避免幻影依赖:从node_modules演进史说起
前端
拾光拾趣录41 分钟前
如何优雅地实现每 5 秒轮询请求?
前端·javascript
snowbitx1 小时前
Vue开发尝试一下
前端
前端缘梦1 小时前
JavaScript 高频面试题精讲:var、let、const 与类型系统全解析
前端·面试
阿慧勇闯大前端1 小时前
TypeScript 从入门到放弃any:老大说再写 any 就扣钱!
前端
AI悦创Python辅导1 小时前
路径分析到底怎么玩?一文搞懂!
前端
mrsk1 小时前
用魔塔来体验一把NLP(机械学习)
前端·机器学习·面试
袋鱼不重1 小时前
Vue3 Effect源码解析
前端·javascript·vue.js