我有一个组件（滑块）与浮动值，并希望改变它的价值与加号和地雷按钮在另一个组件（changeSliderValue），我想：
1.仅在选择slider组件时创建changeSliderValue，并在changeSliderValue中的floatValue更改时更改slider的值。
1.当它被创建的时候，在右下角固定changeSliderValue UI组件的位置。
我的主要组成部分是：
@composable
fun slider(text: String, value: Float) {
var value: Float by remember {
mutableStateOf(value)
}
var selected: Boolean by remember {
mutableStateOf(false)
}
val backgroundColor: Color = when (selected) {
true -> Color(24, 45, 122)
false -> Color.Transparent
}
val fontColor: Color = when (selected) {
true -> Color.White
false -> Color(143, 143, 143)
}
value = when (selected){
true -> changeSliderValue(value = value)
false -> value
}
Box(
modifier = Modifier
.width(108.dp)
.height(60.dp)
.background(backgroundColor, shape = RoundedCornerShape(16))
.padding(5.dp),
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center
) {
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
Text(text = text)
}
Text(
text = value.toString(),
fontFamily = FontFamily(Font(R.font.sevensegment)),
color = fontColor,
fontSize = 20.sp
)
}
}
}我的第二个组成部分是：
@Composable
fun changeSliderValue(value: Float): Float {
var floatValue:Float by remember{
mutableStateOf(value)
}
Box(
modifier = Modifier
.width(227.dp)
.height(58.dp)
.background(color = Color(19, 36, 98), shape = RoundedCornerShape(20))
) {
Row(
modifier = Modifier.fillMaxSize(),
verticalAlignment =Alignment.CenterVertically ,
horizontalArrangement = Arrangement.spacedBy(17.dp , alignment = Alignment.CenterHorizontally)
) {
Box(
Modifier
.background(Color.White, shape = RoundedCornerShape(20))
.width(48.dp)
.height(48.dp)
.clickable {
floatValue -= 0.1F
},
contentAlignment = Alignment.Center
) {
Icon(
painter = painterResource(id = R.drawable.minus),
contentDescription = null,
tint = Color(19, 36, 98)
)
}
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
Text(
text = "افزایش/کاهش",
color = Color.White
)
}
Box(
Modifier
.background(Color.White, shape = RoundedCornerShape(20))
.width(48.dp)
.height(48.dp)
.clickable { floatValue += 0.1F },
contentAlignment = Alignment.Center
) {
Icon(
painter = painterResource(id = R.drawable.plus),
contentDescription = null,
tint = Color(19, 36, 98)
)
}
}
}
}
1条答案
按热度按时间cidc1ykv1#
Jetpack Compose遵循单向数据流（UDF）模式。这意味着数据会沿着Composable层次结构向下流动，并且更改/事件会使用回调传递给父Composable。
我不完全确定你想达到什么目的，但我认为有一些预定义的Composables可以使用。特别是看看滑块组合和OutlinedButton组合。
还可以看看作为Jetpack Compose框架一部分的Icons library。它允许您使用各种图标，而无需手动将其复制到项目中。您可以通过将以下依赖项添加到模块的
build.gradle来获取它：解决方案可能如下所示：
这将产生一个范围从0到100的滑块，其左侧有一个减号按钮，右侧有一个加号按钮。拖动滑块会更新值，按下按钮会更新滑块中显示的值。我希望这足以让你开始。