タスクの改行入力したい
これを実装するには、以下の変更が必要です。
- TextField の singleLine プロパティを false に変更する。
- TextField の高さの振る舞いを調整する（必要であれば）。
具体的な手順
MainActivity.kt ファイルの TodoListScreen 関数にある入力欄 (OutlinedTextField または BasicTextField) の設定を変更していきます。
1. 新規タスク入力用の OutlinedTextField を修正する
TodoListScreen 関数内の、新しいToDo項目を入力する OutlinedTextField を以下のように変更します。
// Todo項目入力欄
OutlinedTextField(
value = newTodoText,
onValueChange = { newValue -> newTodoText = newValue },
label = { Text("新しいToDo") },
// singleLine = true, // この行を削除するか、falseに変更
maxLines = 5, // 例: 最大5行まで表示
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
)- singleLine = true を削除するか、singleLine = false に変更します。これで改行が可能になります。
- maxLines を設定することで、TextField が自動的に拡張する最大行数を制限できます。これを設定しない場合、理論的にはどこまでも伸びてしまいます。ユーザー体験を考えると、ある程度の行数でスクロール可能にするのが一般的です。
2. 編集用の BasicTextField を修正する
LazyColumn の中で、編集モードのときに表示される BasicTextField も同様に修正します。
// 編集モードの場合
// ...
BasicTextField( // BasicTextFieldは枠線がないシンプルなTextField
value = editingText,
onValueChange = { editingText = it },
// singleLine = true, // この行を削除するか、falseに変更
maxLines = 5, // 例: 最大5行まで表示
modifier = Modifier
.weight(1f)
.padding(end = 8.dp)
)
// ...- こちらも singleLine = true を削除するか、singleLine = false に変更し、必要であれば maxLines を設定します。
補足: minLines について
minLines を設定すると、入力内容が短くても指定した行数分の高さを確保します。例えば minLines = 3, maxLines = 5 と設定すると、常に3行分の高さを持ち、入力が増えると最大5行まで伸び、それ以上はスクロール可能になります。デザインに応じて調整してみてください。
OutlinedTextField(
// ...
minLines = 3, // 最低3行分の高さを確保
maxLines = 5, // 最大5行まで自動的に高さが伸びる
// ...
)これで、アプリを再実行すると、タスク入力欄と編集欄で改行ができるようになります！
※Google AI Studioによる回答を参考にしました
