JetpackCompose日記（深いレイアウト階層を恐れないほうが実践的か？）【株式会社ライトコード】

弊社エンジニアの記事になります。

以下のような、文字を線で囲ったレイアウトを作りたい場合

Modifierの順番を工夫することで実現できる。

1@Composable
2fun MyLabel1() {
3    Text(
4        modifier = Modifier
5            .padding(all = 4.dp) // 外側のpadding
6            .border(
7                width = 2.dp,
8                color = Color.Blue
9            )
10            .padding(all = 8.dp), // 内側のpadding
11        text = "Border付きテキスト1"
12    )
13}

ただ、これはあまり実践的ではないと思います。
Modiferへの設定順番を利用した書き方だが・・・

「.padding(all = 4.dp)」が枠線の外側なのか内側なのか、パッと見では分からないことが大問題。

JetpackComposeのいいところは
「パッと見でどのようなViewが定義されているのかがわかること」なので
この書き方では、その利点を殺していると言える。

より実践的なのは？

レイアウトの階層を深くしたほうが、誰が見ても分かりやすいですよね。

1@Composable
2fun MyLabel2() {
3    Box(
4        modifier = Modifier
5            .padding(all = 4.dp)
6            .border(
7                width = 2.dp,
8                color = Color.Blue
9            )
10    ) {
11        Text(
12            modifier = Modifier
13                .padding(all = 8.dp),
14            text = "Border付きテキスト1"
15        )
16    }
17}

ComposeのConstraintLayoutのDevelopersにも記載されている通り

注: View システムでは、大規模で複雑なレイアウトを作成する場合、ConstraintLayout を使用することが推奨されていました。これは、ネストされたビューよりもフラットなビュー階層の方がパフォーマンスに優れているためです。しかし、深いレイアウト階層を効率的に扱える Compose では、このような懸念はありません。

と記述されているので
わかりやすさ優先で、レイアウトの階層を恐れずに深くしていきましょう。

…