
@Composable
fun Screen(modifier: Modifier = Modifier) {
Column(
modifier.fillMaxSize().padding(44.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Content1("1234567890")
// TextがfillWidthになってbuttonが画面外に...
Content1("1234567890".repeat(10))
// 違う、そうじゃない
Content2("1234567890")
Content2("1234567890".repeat(10))
// Good!
Content3("1234567890")
Content3("1234567890".repeat(10))
}
}
@Composable
fun Content1(text: String) {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Button(onClick = {}) {
Text("ok")
}
}
}
@Composable
fun Content2(text: String) {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text,
Modifier.weight(1f),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Button(onClick = {}) {
Text("ok")
}
}
}
@Composable
fun Content3(text: String) {
ConstraintLayout {
val (left, right) = createRefs()
Text(
text,
Modifier.constrainAs(left) {
start.linkTo(parent.start)
end.linkTo(right.start, margin = 8.dp)
width = Dimension.preferredWrapContent
centerVerticallyTo(parent)
},
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Button(
onClick = {},
Modifier.constrainAs(right) {
end.linkTo(parent.end)
centerVerticallyTo(parent)
}
) {
Text("ok")
}
}
}Rowで左側のコンポーネントの幅が可変で右側が固定で、左寄せレイアウトがRowできないorz
RowのModifireでできれば楽なのに…
https://developer.android.com/develop/ui/compose/layouts/constraintlayout
[versions]
constraintlayoutCompose = "1.1.1"
[libraries]
androidx-constraintlayout-compose = { group = "androidx.constraintlayout", name = "constraintlayout-compose", version.ref = "constraintlayoutCompose" }Android Studio Meerkat 2024.3.1 Patch 1 built on March 13, 2025
