SwiftUI リスト背景の色を変更

ポイント

①「.listRowBackground( )」メソッドを使用する
② ForEach内でメソッドを使用する(※List内で使用しない)

失敗例(List内で使用したとき)
var body: some View {
        List(1 ..< 10) { item in
            Text("メッセージ")
                .padding(.vertical, 10)
                .frame(width: 240)
                .background(Color.white)
                .cornerRadius(20)
            .frame(height: 60)
            .listRowBackground(Color.accentColor.opacity(0.6))
        }
    }

成功例(ForEach内で使用したとき)
var body: some View {
        List {
            ForEach(1 ..< 10) { item in
                Text("メッセージ")
                    .padding(.vertical, 10)
                    .frame(width: 240)
                    .background(Color.white)
                    .cornerRadius(20)
                .frame(height: 60)
                .listRowBackground(Color.accentColor.opacity(0.6))
            }
        }
    }

.listRowBackground( )の括弧内では以下を設定しています。
色  :Color.accentColor
透明度:.opacity(0.6)

SwiftUI Room変更点

SwiftUIの紹介動画を参考にアプリ制作を行なったのですが、いくつか変更点がありましたのでまとめてみました。

参考動画(https://developer.apple.com/videos/play/wwdc2019/204/

変更点①

ContentView.swift

<変更前>

NavigationButton() {}

<変更後>

NavigationLink() {}
変更点②

RoomDetail.swift

<変更前>

.tapAction {}

<変更後>

.onTapGesture {}
変更点③

RoomStore.swift

<変更前>

class RoomStore : BindableObject {
   // 省略
}

<変更後>

class RoomStore : ObservableObject {
    // 省略
}
変更点④

RoomStore.swift

<変更前>

    var rooms: [Room] {
        didSet { didChange.send() }
    }
    
    init(rooms: [Room] = []) {
        self.rooms = rooms
    }
    
    var didChange = PassthroughSubject<Void, Never>()

<変更後>

    @Published var rooms: [Room]
    
    init(rooms: [Room] = []) {
        self.rooms = rooms
    }
変更点⑤

ContentView.swift

<変更前>

@ObjectBinding var store = RoomStore()

<変更後>

@ObservedObject var store = RoomStore()

投稿フォームの改行

textareaで改行する方法

textareaを使って以下のような、改行した文章を投稿してみます。

f:id:nekoyutaneko:20210213161936p:plain

そして、保存したテキストを画面で表示すると

f:id:nekoyutaneko:20210213162153p:plain

スペースとして処理されてしまっています・・・

改行として読み込むように以下のstyleを適用

white-space: pre-wrap;

f:id:nekoyutaneko:20210213162823p:plain

改行には成功しましたが、レイアウトが崩れていますね。
なぜでしょうか?

表示レイアウト崩れの修正

修正前のコードが以下です。

<div class="text">
  <%= blog.text %>
</div>

修正後のコードが以下です。

<div class="text"><%= blog.text %></div>

修正前は、親要素と子要素の書き方のように、
「div開始タグ」→「改行」→「段落」→「テキスト」
と記述していたのですが、これが原因でした。
改行と段落(スペース)がテキストの一部として扱われていたからだったのですね。

無事、表示されるようになりました。

f:id:nekoyutaneko:20210213162843p:plain

正規表現 一覧

本記事では、私が使う頻度が多いと感じる正規表現をまとめていきたいと思います。

正規表現

① 郵便番号(3桁 - 4桁)
/\A[0-9]{3}-[0-9]{4}\z/
② 全角ひらがな、全角カタカナ、漢字
/\A[ぁ-んァ-ン一-龥々]+\z/
③ 全角カタカナ
/\A[ァ-ヶー-]+\z/
④ 半角英数
/\A[a-zA-Z0-9]+\z/
⑤ 半角英数混合
/\A(?=.*?[a-z])(?=.*?\d)[a-z\d]+\z/i

GitHubを使用するときの注意点

GitHubの保存場所は大きく分けて2種類あります

 

特にリモートリポジトリは設定を「public(公開)」にしておくと、多くの人の目に触れてしまうので注意が必要です。 ⇔「private(非公開)」

 

GitHub Desktopを使ってリモートリポジトリを作成するときは、チェックボックスにチェックが入っていないと、publlic(公開)設定で作成されるので注意が必要です。
↓下の画像はprivate(非公開)設定です。

 

f:id:nekoyutaneko:20210131190634p:plain


GitHubを利用するときは、以下のことに注意しましょう。

 

  • GitHubにアップロードしても良いコードなのか?
  • public(公開)とprivate(非公開)どちらでアップロードするか?