質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Q&A

解決済

1回答

1152閲覧

SwiftUI:Listを編集モードにした際の削除ボタン(赤い禁止マークのボタン)が表示されない

Chang1214

総合スコア1

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

0グッド

0クリップ

投稿2022/10/14 02:35

編集2022/10/15 21:56

前提

iPhoneの連絡先Appのクローンを作成中、電話番号のセクションで編集モードを有効にするも削除ボタンが表示されないボールドテキスト

実現したいこと

List内で、[.onTapGesture]をタップするたび、editModeが.activeな状態のTextFieldを表示。

イメージ説明

発生している問題・エラーメッセージ

エラーなどは特に発生していません。

初めの間は問題なく表示されていたのですが、ある日突然表示されなくなりました。

コードを変更したことがキッカケとかではないです。

発生している事象としては以下のイメージの通りです。
イメージ説明

該当のソースコード

SwiftUI

1import SwiftUI 2import PhotosUI 3 4struct ProfileView: View { 5 @EnvironmentObject var profileData: ProfileData 6 @Environment(\.editMode) var editMode 7 @State var phoneNumberView: Bool = false 8 @State var telLabelView: Bool = false 9 @State var mailLabelView: Bool = false 10 @State var selectedPhoneLabels: String = "" 11 @Environment(\.dismiss) var dismiss 12 13 14 var body: some View { 15 16 NavigationView { 17 List { 18 19 HStack { 20 Spacer() 21 ProfilePhotoSelect() 22 .padding() 23 Spacer() 24 } 25 26 27 Section { 28 TextField("姓", text: $profileData.firstName) 29 TextField("姓(フリガナ)", text: $profileData.firstNameFurigana) 30 TextField("名", text: $profileData.lastName) 31 TextField("名(フリガナ)", text: $profileData.lastNameFurigana) 32 TextField("会社", text: $profileData.company) 33 TextField("会社名(フリガナ)", text: $profileData.companyFurigana) 34 }// Name Section 35 36 Section { 37 ForEach(profileData.telNumber.indices, id: \.self) { i in 38 HStack { 39 Text(profileData.telLabels ?? "") 40 .foregroundColor(Color(.systemBlue)) 41 .onTapGesture { 42 telLabelView.toggle() 43 } 44 .sheet(isPresented: $telLabelView) { 45 PhoneLabels() 46 } 47 Divider() 48 TextField("電話", text: $profileData.telNumber[i]) 49 } 50 } 51 .onDelete(perform: rowRemove) 52 53 54 55 HStack { 56 Image(systemName: "plus.circle.fill") 57 .foregroundColor(Color(.systemGreen)) 58 Divider() 59 Text("電話を追加") 60 .font(.callout) 61 .fontWeight(.light) 62 .padding(.horizontal) 63 } 64 .onTapGesture { 65 self.profileData.telNumber.append("") 66 withAnimation(){ 67 editMode?.wrappedValue = .active 68 } 69 70 } 71 }// TelNumber Section 72 73 Section { 74 75 ForEach(profileData.emailAdress.indices, id: \.self) { x in 76 TextField("メール", text: $profileData.emailAdress[x]) 77 }.onDelete(perform: rowRemove) 78 79 80 HStack { 81 Image(systemName: "plus.circle.fill") 82 .foregroundColor(Color(.systemGreen)) 83 Divider() 84 Text("メールを追加") 85 .font(.callout) 86 .fontWeight(.light) 87 .padding(.horizontal) 88 } 89 .onTapGesture { 90 profileData.emailAdress.append("") 91 withAnimation(){ 92 editMode?.wrappedValue = .active 93 } 94 } 95 }// Email Section 96 97 Section { 98 99 NavigationLink { 100 Ringtone() 101 }label: { 102 Text("着信音") 103 .font(.callout) 104 .fontWeight(.light) 105 .foregroundColor(.black) 106 Text("デフォルト") 107 .padding(.horizontal) 108 .font(.callout) 109 .foregroundColor(.blue) 110 } 111 112 113 } 114 } 115 .listStyle(.grouped) 116 .navigationBarTitle("新規連絡先",displayMode: .inline) 117 .navigationBarItems(leading: Button{ 118 dismiss() 119 }label: { 120 Text("キャンセル") 121 }, trailing: Button { 122 print("DEBUG: Register user") 123 }label: { 124 Text("完了") 125 }) 126 } 127 128 129 130 } 131 132 func rowRemove(offsets: IndexSet) { 133 profileData.telNumber.remove(atOffsets: offsets) 134 }//項目を削除する際の処理 135}

試したこと

他のセクションの部分を削除し、症状を検証しましたが変わらず

他のファイルに全く同じコードを記述してみたのですが同様の症状は発生しませんでした。

他のプロジェクトに該当のコードをコピー&ペーストした際は症状発生

補足情報(FW/ツールのバージョンなど)

macOS 12.6
XCode Version 14.0.1 (14A400)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/10/14 04:43

質問欄の該当のソースコードには RegisterProfileViewしかご記載がありませんが、 このビューの呼び出し元や呼び出し先でeditModeを変更していたりしますでしょうか?
Chang1214

2022/10/14 05:47

申し訳ございません。掲載していたソースコードに問題のないコードを記載してしまっていました。 このビューの呼び出し先や元でeditModeの変更は行なっておりません。。
guest

回答1

0

ベストアンサー

質問欄の修正ありがとうございます。
手元の環境でも問題が再現できました。

https://zenn.dev/usk2000/articles/07181f49cf47a4f5caf9

Listの編集につきまして、2通りあるみたいです。

  1. EditButtonを使う方法{@Environment(.editMode) var editMode}
  2. EditModeを使う方法(@State var editMode: EditMode)

該当のソースコードはこれらが混在していることが原因のように見えました。

@Environment(\.editMode) var editMode
を使用する場合、上記「1.」になりますので、
navigationBarItemsに EditButton() などを記述して、
このボタンで編集の状態(.active)にしてあげると良いみたいです。

上記「2.」の方法にする場合は、
@State var editMode: EditMode = .inactiveのように
ProfileView内部で独自の編集モードの状態を保持するようにしてあげて、
Listのmodifierに
.environment(\.editMode, self.$editMode)
を指定してあげると良いみたいです。

投稿2022/10/14 06:38

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Chang1214

2022/10/15 12:56

ご提案いただいた手順を実施いたしましたところ解決いたしました!! 本当に悩んでいたので助かりました。 心から感謝いたします🙇
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問