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

    }
}

运行效果:

相关推荐
超人不会飛4 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦7 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想10 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z18 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982424 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴29 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干33 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗35 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder39 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder42 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github