【Jetpack Compose】Row で横並びにした要素の高さをそろえる方法(Andoroid)

均等幅の横並びボタン

まず高さの異なる横並びボタン(高さ指定はしていない。内部にあるテキストの長さとか数の違いにより高さに差が出ている)。

幅はそれぞれのボタンにweight(1f)を当てて均等にしている。

コードはこう。

fun BottonBorder(){
    Row(
        modifier = Modifier.padding(all = Space),
        horizontalArrangement= Arrangement.spacedBy(Space),
    ) {
        Button(
            onClick = { /* Do something! */ },
            modifier = Modifier
                .weight(1f)
                .border(
                    width = Border,
                    color = Color.Black,
                    shape = RoundedCornerShape(Shape)
                )
            ,
            colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
        ) {
            Column() {
                Text("Button1")
                Text("Button1")
                Text("Button1")
            }
        }
        Button(
            onClick = { /* Do something! */ },
            modifier = Modifier
                .weight(1f)
                .border(
                    width = Border,
                    color = Color.Black,
                    shape = RoundedCornerShape(Shape)
                )
,
            colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),

            ) {
            Text("Button2")
        }
    }
}

均等幅かつ同じ高さの横並びボタン

高さを指定せずに同じ高さにするには、

①親である Rowに「.height(IntrinsicSize.Min)」を指定する。

②各ボタンには.fillMaxHeight()を指定

コードはこう(太字が変更点)

fun BottonBorder(){
    Row(
        modifier = Modifier.padding(all = Space).height(IntrinsicSize.Min),
        horizontalArrangement= Arrangement.spacedBy(Space),
    ) {
        Button(
            onClick = { /* Do something! */ },
            modifier = Modifier
                .weight(1f)
                .border(
                    width = Border,
                    color = Color.Black,
                    shape = RoundedCornerShape(Shape)
                ).fillMaxHeight()

            ,
            colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
        ) {
            Column() {
                Text("Button1")
                Text("Button1")
                Text("Button1")
            }
        }
        Button(
            onClick = { /* Do something! */ },
            modifier = Modifier
                .weight(1f)
                .border(
                    width = Border,
                    color = Color.Black,
                    shape = RoundedCornerShape(Shape)
                ).fillMaxHeight()
,
            colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),

            ) {
            Text("Button2")
        }
    }
}

コメント

タイトルとURLをコピーしました