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

    }
}

运行效果:

相关推荐
编程乐学26 分钟前
安卓非原创--基于Android Studio 实现的天气预报App
android·ide·android studio·课程设计·大作业·天气预报·安卓大作业
mapbar_front34 分钟前
面试问题—上家公司的离职原因
前端·面试
昔人'1 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'1 小时前
css `dorp-shadow`
前端·css
流***陌1 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
纳于大麓2 小时前
Kotlin基础语法
linux·windows·kotlin
烛阴2 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者2 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术2 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端
欧阳呀2 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui