/
ModifierClickPuzzlerScreen.kt
73 lines (65 loc) · 2.13 KB
/
ModifierClickPuzzlerScreen.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
package de.dbaelz.demo.compose.puzzler.ui.puzzler
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@ExperimentalFoundationApi
@Composable
fun ModifierClickPuzzlerScreen() {
var clickText by remember { mutableStateOf("") }
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
ModifierClickPuzzler(onClick = { clickText = it })
Spacer(Modifier.height(16.dp))
Text("Click listener: $clickText")
}
}
/**
* Explanation in the tweets: https://twitter.com/dbaelz/status/1419976352946692117
*/
@ExperimentalFoundationApi
@Composable
private fun ModifierClickPuzzler(onClick: (String) -> Unit) {
ClickableText(
modifier = Modifier
.clickable { onClick("One") }
.combinedClickable(onClick = { onClick("two") }),
onClick = onClick
)
}
@ExperimentalFoundationApi
@Composable
private fun ClickableText(
modifier: Modifier = Modifier,
onClick: (String) -> Unit,
) {
Box(modifier = modifier
.size(100.dp)
.background(MaterialTheme.colors.primary)
.clickable { onClick("Three") }
.combinedClickable(onClick = { onClick("Four") }),
contentAlignment = Alignment.Center
) {
Text(text = "Click me!",
textAlign = TextAlign.Center,
color = MaterialTheme.colors.onPrimary,
fontSize = 20.sp,
modifier = modifier
.fillMaxSize()
.clickable { onClick("Five") }
.combinedClickable(onClick = { onClick("Six") })
)
}
}