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

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

Box
功能说明：简单的布局组件，可容纳其他组件，并依据alignment属性精确指定内部组件的对齐方式，实现灵活多变的布局效果，适用于对组件位置有特定要求的场景。
示例场景：将一个小图标和一段文字在水平方向上居中对齐，放置在屏幕的特定区域，如在一个提示框中，图标和文字组合显示。

package org.lxz.project.compose.demoimport 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.InternalResourceApiobject BoxDemo {@OptIn(InternalResourceApi::class)val imageVector = Icons.Filled.AccountBox
//    val imageVector = Icons.Filled.Search// 定义一个CompositionLocal，用于方便在不同地方获取统一的布局配置，例如间距等属性val LocalBoxPadding: CompositionLocal<Dp> = staticCompositionLocalOf { 20.dp }// 定义一个可配置的文本样式，方便统一设置文字相关属性@Immutabledata class TextStyleConfig(val fontSize: Dp = 16.dp,val color: Color = Color.Black)// 定义一个可配置的图标样式，方便统一设置图标相关属性@Immutabledata class IconStyleConfig(val size: Dp = 30.dp,val paddingEnd: Dp = 10.dp)// 用于创建带有图标和文字的Box布局的函数，接收相应配置参数@Composablefun 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)}}@Composablefun 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}))}}
}

运行效果: