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を使って以下のような、改行した文章を投稿してみます。
そして、保存したテキストを画面で表示すると
スペースとして処理されてしまっています・・・
改行として読み込むように以下のstyleを適用
white-space: pre-wrap;
改行には成功しましたが、レイアウトが崩れていますね。
なぜでしょうか?
表示レイアウト崩れの修正
修正前のコードが以下です。
<div class="text"> <%= blog.text %> </div>
修正後のコードが以下です。
<div class="text"><%= blog.text %></div>
修正前は、親要素と子要素の書き方のように、
「div開始タグ」→「改行」→「段落」→「テキスト」
と記述していたのですが、これが原因でした。
改行と段落(スペース)がテキストの一部として扱われていたからだったのですね。
無事、表示されるようになりました。
GitHubを使用するときの注意点
GitHubの保存場所は大きく分けて2種類あります
特にリモートリポジトリは設定を「public(公開)」にしておくと、多くの人の目に触れてしまうので注意が必要です。 ⇔「private(非公開)」
GitHub Desktopを使ってリモートリポジトリを作成するときは、チェックボックスにチェックが入っていないと、publlic(公開)設定で作成されるので注意が必要です。
↓下の画像はprivate(非公開)設定です。
GitHubを利用するときは、以下のことに注意しましょう。
- GitHubにアップロードしても良いコードなのか?
- public(公開)とprivate(非公開)どちらでアップロードするか?