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

    }
}

运行效果: