TextField

こんにちは。Android アプリ開発担当の nagayama（@nagayan_dev）です。 今回は Jetpack Compose での独自 TextField の実装についてまとめましたので、その内容をお伝えします。 背景 実装 1. 文字の見切れと不要な下線の対応 2. ヒント文字を表示する 3. 入力文字やカーソル色を変更 4. TextField にフォーカスを当てる/外す まとめ 背景 私が担当している「auサービスToday」で Jetpack Compose に置き換える対応を着々と進めています。記事検索画面の対応をしている時に、文字入力部分でハマった部分があるため、それを…

前に書いたTextFieldでOptional値を扱う場合にView内の@State属性を付けたメンバー変数に一旦渡して処理する方法を試した。 メンバー変数に値を渡すタイミングとしてonAppear()を使っていた。 TextField - ひとしれずひっそり onAppear()は描画時に1回呼ばれるだけなので、外部で値が変更された場合に適用されない場合がある。 例としてこの様なモデルを用意した。 timeはOptionalでnilを与えることができる。 import Foundation import SwiftUI class Model: ObservableObject { init…

TextFieldで編集が終わったら値をセットする方法。 Optionalを扱うモデルを用意してBindするところまで。 OptionalだとTextFieldにBindingできないのでView内のメンバnameで一旦受ける。 onAppearのタイミングでセットする。 import SwiftUI // CoreDataを想定してOptionalを扱うモデルを用意 struct Person { var name: String? = nil } struct ContentView: View { @State var person = Person() @State var name:…

わんぱく Flutter！ 第二回 Widget を試してみよう！ さて、第一回では、通例のインストールを行いました。最後に動作確認をしましたが、そのアプリケーションをちょこちょこ変更しながら、Flutter に用意されている Widget を試してみましょう。 1. サンプルプログラムの概観 動作確認用に作成した flutter_app を開きましょう。第一回から続けて読んでいる方は、開いている状態でしょう。 恐らく、目の前には main.dart ファイルのプログラムが見えているはずです。見えていない方は、ウィンドウ左側のツリーメニューから、"Project" - "flutter_app…