I want to apply modifier in such a way that if the width is provided, it should use the provided width, else use the max-width available.
I am applying the Modifier in the below fashion, but the result is not as expected. The view width is going haywire. Requesting guidance here.
val myModifier = Modifier.padding(
start = 4.dp, end = 4.dp, top = 8.dp, bottom = 8.dp
)
if (viewWidth == null)
myModifier.then(Modifier.fillParentMaxWidth(1f))
else
myModifier.then(Modifier.width(viewWidth))
myModifier.then(
Modifier.height(viewHeight ?: 100.dp)
.clickable(onClick = { listener.onItemClick(item) })
)
Modifier
has a then
function to concatenate the current modifier with another modifier. This then
function returns a new modifier that you have not used it. You have to re-initialize your myModifier
variable with the returned modifier.
Check the below code:
var myModifier = Modifier.padding(
start = 4.dp, end = 4.dp, top = 8.dp, bottom = 8.dp
)
if (viewWidth == null)
myModifier = myModifier.then(Modifier.fillParentMaxWidth(1f))
else
myModifier = myModifier.then(Modifier.width(viewWidth))
myModifier = myModifier.then(
Modifier
.height(viewHeight ?: 100.dp)
.clickable(onClick = { listener.onItemClick(item) })
)
You can create a conditional modifier via an extension function:
fun Modifier.conditional(condition : Boolean, modifier : Modifier.() -> Modifier) : Modifier {
return if (condition) {
modifier.invoke(this)
} else {
this
}
}
This lets you chain a modifier in a conditional
block like this:
val applySpecialBackground : Boolean = [...]
Column(
modifier = Modifier
.fillMaxWidth()
.conditional(applySpecialBackground) {
background(Color.Red)
}
.padding(16.dp)
) { [...] }
It will only apply the conditional modifier when the condition is true
.
You can also use Modifier.then
in a more compact way:
val modifier = Modifier
.padding(start = 4.dp, end = 4.dp, top = 8.dp, bottom = 8.dp)
.then(if(viewWidth == null) Modifier.fillMaxWidth(1f) else Modifier.width(viewWidth))
.height(viewHeight ?: 100.dp)
.clickable(onClick = { listener.onItemClick(item) })
See: https://jetc.dev/slack/2020-12-13-conditional-modifiers.html
All the above answers are good enough but i would like to add my one cent. I found this snippet more readable and clean.
ClickableText(
modifier = Modifier
.let {
if (selectedPosition == index) {
return@let it
.background(
Green200,
shape = RoundedCornerShape(12.dp)
)
}
it
}
.padding(horizontal = 12.dp, vertical = 4.dp),
text = AnnotatedString(categories[index]),
style = TextStyle(
fontSize = 14.sp,
textAlign = TextAlign.Center
),
onClick = {
selectedPosition = index
}
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.