Compose Recetteの6章〜19章を読んだ | N-BLOGΣ（゜Д゜）カッ!

<br />

Compose Recette アプリ開発の新スタンダードを学ぼう
を書いました

以下、感想

・remember
状態を記憶するのはremember
再描画のタイミングで状態が消えるのでそのために利用する
remember { mutableStateOf(true)}

・AlertDialog
previewが動かない
Composableの内部実装でAndroid Viewシステムを利用しているため、Androidプラットフォーム固有の処理であるためコンポーザブル用のpreviewでは動かない
エミューレーター上で実行しないといけない

・ComposableからComposableを呼ぶ
ComposableからComposableを呼べる

data class User(
    val firstName: String,
    val familyName: String
)

@Preview("Preview Composable for UnitItem")
@Composable
fun ParameterSample() {
    val user = User(
        firstName = "光秀",
        familyName = "明智"
    )
    UserItem(user = user)
}

@Composable
fun UserItem(user: User){
    Row() {
        Text(text = user.familyName)
        Spacer(modifier = Modifier.size(8.dp))
        Text(text = user.firstName)
    }
}

・PreviewParameterProvider
PreviewParameterProviderを使うとサンプルを流せる

class FakeUserProvide : PreviewParameterProvider<User> {
    override val values: Sequence<User>
        get() = listOf(
            User(
                firstName = "信長",
                familyName = "織田"
            ),
            User(
                firstName = "蘭丸",
                familyName = "森"
            )
        ).asSequence()
    override val count: Int
        get() = values.count()
}

@Preview
@Composable
fun UserItem2(
    @PreviewParameter(
        provider = FakeUserProvide::class,
        limit = 2
    ) user: User
) {
    Row() {
        Text(text = user.familyName)
        Spacer(modifier = Modifier.size(8.dp))
        Text(text = user.firstName)
    }
}

・ConstraintLayout
ConstraintLayoutはXML以上に直感的じゃない
使いにくいなぁ。慣れが必要かと思う

@Preview
@Composable
fun MyLayout(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier) {
        val (textRef, text2Ref) = createRefs()

        Text(
            text = "Hello",
            modifier = Modifier.constrainAs(textRef) {
//                centerTo(parent)
//                start.linkTo(parent.start)
//                top.linkTo(parent.top)
                centerHorizontallyTo(parent)
            }
        )
        Text(
            text = "Hello2",
            modifier = Modifier.constrainAs(text2Ref) {
//                start.linkTo(textRef.end, 24.dp)
//                top.linkTo(textRef.bottom)

                linkTo(
                    top = textRef.bottom,
                    bottom = parent.bottom,
                    bias = 0.8f
                )
            }
        )
    }
}

これで本全部読みました
Composableのcodelabもやったし
後は実践していくしかないかなぁって感想

<br />

Pocket

関連記事: