Skip to main content

Compose Recetteの6章〜19章を読んだ

masterka 書評

[感想]Compose Recetteの1章〜5章を読んだ
の続編

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

以下、感想


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

 

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

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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を使うとサンプルを流せる

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
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以上に直感的じゃない
使いにくいなぁ。慣れが必要かと思う

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
@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もやったし
後は実践していくしかないかなぁって感想

関連記事:

このエントリーをはてなブックマークに追加
Pocket