今回は、アプリ開発の練習で作っているTodoアプリに、タスクの編集画面で値が場合に更新ボタンを押せないよう制御する処理を実装していく。

ここまで作ってきたサンプルのTodoアプリはこちら。

まずは仕様の詳細を説明しよう。

上記はタスク名の編集画面。

SwiftUIのTextFieldビューで、バインドしたCoreDataのエンティティを編集するのだが、この時編集するタスク名が空の場合に更新ボタンを押せないようにする。

要するにタスク名を必須入力項目にするということだ。

編集画面のコード全文

それではコードを解説していこう。

import SwiftUI
import CoreData

struct TaskEditView: View {
  @ObservedObject var task: Task
  
  @Environment(\.managedObjectContext) var viewContext
  @Environment(\.presentationMode) var presentation
  
  var taskNameIsValid: Bool {
    return !task.name.isEmpty
  }
  
  var body: some View {
    Form {
      TextField("Edit TaskName", text: $task.name)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding()
      
      Button(action: {
        Task.save(in: self.viewContext)
        self.presentation.wrappedValue.dismiss()
      }) {
        Text("更新")
      }.padding()
        .disabled(!taskNameIsValid)
      }
    .navigationBarTitle("編集画面")
    .navigationBarBackButtonHidden(!taskNameIsValid)
  }
}

disabledモディファイア

26行目のdisabledモディファイアでボタンの無効化を制御している。

disabledモディファイアはBool型の値を引数に取るのだが、ここでは計算型プロパティtaskNameIsValidを設定している。

taskNameIsValidは、タスク名に値が設定されていればTrueを返す。
この結果を反転させdisabledに渡すことで、値が空の場合にボタンを無効化させることができるようになる。

navigationBarBackButtonHiddenモディファイア

さらに29行目のnavigationBarBackButtonHiddenモディファイアでもtaskNameIsValidを使っている。

これは編集画面左上のBackButton（タスク一覧）を無効化するモディファイアで、更新ボタンと同様、タスク名が未入力の場合に無効化させるようにしている。

実際に編集画面で、タスク名を空にすると上記のとおりとなる。