Overview
Jetpack Composeを使用して、TextFiledを使い入力機能を作るのを今回やってました。
注意点
今回もモケラボさんの動画を参考にしたのですが、当時はマテリアル2だそうで、別ものみたいで、今使っているのは、マテリアル3だから、アノテーションつけないとエラーが出てビルド出来ないみたいです!
入力した値を表示するために、状態を保持する設定を追加する必要がありますが、画面を回転すると、入力した状態が消えてしまうので、rememberではなくrememberSaveableを使います。
詳しくはこちらをみてください
remember を使用すると、状態は再コンポーズをまたいで保持されますが、設定の変更後は保持されません。保持するには、rememberSaveable を使用する必要があります。rememberSaveable は、Bundle に保存可能なすべての値を自動的に保存します。その他の値については、カスタムのセーバー オブジェクトに渡すことができます。
summary
公式から引用
テキストの入力と変更
TextField を使用すると、ユーザーがテキストの入力や変更を行えるようになります。TextField の実装には次の 2 つのレベルがあります。
TextField はマテリアル デザインの実装であり、次のようなマテリアル デザイン ガイドラインに沿っているため、この実装を選択することをおすすめします。
デフォルトのスタイル設定は塗りつぶしです。
OutlinedTextField は、枠線のスタイル設定バージョンです。
BasicTextField を使用すると、ユーザーはハードウェア キーボードまたはソフトウェア キーボードを使用してテキストを編集できます。ただし、ヒントやプレースホルダのような装飾は用意されていません。
マテリアル3に対応したコード
動画の通りにやってるとハマったので、アノテーションつけたら、エラー解消できたコードです。
package com.example.basiccodelab
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.basiccodelab.ui.theme.BasicCodelabTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BasicCodelabTheme {
// A surface container using the 'background' color from the theme
Surface(
color = MaterialTheme.colorScheme.background
) {
TextFieldSample()
}
}
}
}
}
// TextFiled用のComposableを作成
@OptIn(ExperimentalMaterial3Api::class)// これを付けるとExperimentalなAPIを使えるようになる
@Composable
// TextFieldSampleという名前のComposableを作成
fun TextFieldSample() {
// rememberSaveableは、画面回転などで状態がリセットされないようにするためのもの
val inputValue = rememberSaveable { mutableStateOf("") }
TextField(
value = inputValue.value,
onValueChange = { inputValue.value = it },// ラムダ式の引数はitで受け取れる
label = { /*TODO*/ },
modifier = Modifier.padding(16.dp)
)
}
Kotlinのラムダのitとは？
ラムダ式だと、受け取る引数が１つの場合は、itを使って短くコードを書けるようです。
thoughts
入力フォームを作ってみた感想ですが、Jetpack Composeだと、Flutterと違って、自動でWidgetに当たるコンポーズ関数をimportしてくれないみたいで、赤い文字のところで option + Enter押してショートカットで、importするんですけど、1個、1個やると面倒でしたね。
画面の回転への対応も必要だったので、Native難しいな〜と悩まされました。
学習の参考にした動画
Discussion