🤖

詳解 Jetpack Compose ── 基礎から学ぶAndroidアプリの宣言的UI を読んでみた

2024/12/07に公開

Jetpack Compose

random

tech

サンプルの通りに動かない？

最近発売したこちらの本に興味がありやってみたのですがコードが動かない。。。
あれなぜだ？

詳解 Jetpack Compose ── 基礎から学ぶAndroidアプリの宣言的UI

もしかしたらレイアウトに問題があるのかもしれない。縦向きで表示すると確認できた。
公式も確認しつつやってみた。

value を変更すると、value を読み取るすべてのコンポーズ可能な関数の再コンポーズがスケジュール設定されます。

コンポーザブルの MutableState オブジェクトを宣言するには、次の 3 つの方法があります。

val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }
これらの宣言は同等であり、状態のさまざまな用途に応じて糖衣構文として提供されます。作成するコンポーザブル向けに読みやすいコードを生成する構文を選択する必要があります。

by デリゲート構文には、次のインポートが必要です。

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

ないと動かなかったな。

package com.example.composetour

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.composetour.ui.theme.ComposeTourTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeTourTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
  var isVisible by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { isVisible = !isVisible }) {
            Text("Show/Hide Text")
        }
        if (isVisible) {
            Text("Hello")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeTourTheme {
        Greeting("Android")
    }
}

感想

デモのソースコードが全体のコードが書いてなかったので気づかなかった💦
var value by remember { mutableStateOf(default) }を使うときは。。。

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

が必要です。

サンプルの通りに動かない？

感想

Discussion