SwiftUI 框架

利用 SwiftUI 的視圖修飾符 簡單構建有意義的空白狀態

空白狀態 (Empty State) 是 UX 的重要元素,是使用者初次打開 App 時看到的東西,要留下好的第一印象,機會就只有一次。一個有意義的空白狀態,可以讓使用者感到被歡迎,我們也可以藉著這個機會,教使用者如何使用 App。在這篇文章中,Peter 將會利用 SwiftUI,跟大家探究實作空白狀態的不同方法。
利用 SwiftUI 的視圖修飾符 簡單構建有意義的空白狀態
利用 SwiftUI 的視圖修飾符 簡單構建有意義的空白狀態
In: SwiftUI 框架

空白狀態 (Empty State) 是 UX 的一個重要元素,是使用者初次打開我們的 App 時看到的東西,要留下好的第一印象,機會就只有一次,因此一個好的空白狀態很重要。一個有意義的空白狀態,可以讓使用者感到被歡迎,我們也可以藉著這個機會,教使用者如何使用我們的 App。

現在,我們的範例 App Make It So 還沒有一個有意義的空白狀態。在這篇文章中,我們將會利用 SwiftUI,探究實作空白狀態的不同方法。

我們的範例

首先,讓我們來看看 Apple 的提醒事項 App,因為這是我們想要複製的 App。

empty list view

有一個簡單的方法可以實作空白狀態,就是使用 Xcode 的 Make Conditional 重構 (refactoring)(CMD + 點擊視圖,然後選擇 Make Conditional)。如此一來,視圖就會被包裝 (wrap) 在 if ... else 語句中,並將整個結構包裝在 VStack 中:

struct ContentView: View {
  @State var isEmpty = true
  var body: some View {
    VStack {
      if isEmpty {
        Text("Hello, World!")
      } else {
        EmptyView()
      }
    }
  }
}

這個方法不是不好,但會給視圖的程式碼增加視覺干擾 (visual noise)。接下來,讓我們看看如何可以改善這一點吧!

利用 ViewModifier 來管理空白狀態

視圖修飾符 (ViewModifier) 是 SwiftUI 其中一個主要的功能,讓我們可以愉快地編寫 SwiftUI 程式碼。如果沒有視圖修飾符,我們就只可以利用初始化器 (initialisers) 配置視圖,這樣會嚴重影響開發者體驗。

幸好有視圖修飾符,我們可以如此配置視圖:

Text("Hello, World!")
  .foregroundColor(.red)
  .font(.title)
  .opacity(75)

而不用這樣配置(假設情況):

Text("Hello, World!", foregroundColor: .red, font: .title, opacity: 0.75)

在 Call Site 中,用於向視圖添加空白狀態的視圖修飾符會是這樣的:

Text("Hello, World!")
  .emptyState($isEmpty) { 
    Text("Sorry - no content available")
  }

讓我們來看看如何構建它。視圖修飾符通常由兩部分組成:視圖修飾符本身、和讓修飾符更易於使用的 Extension。讓我們從視圖修飾符開始:

struct EmptyStateViewModifier<EmptyContent>: ViewModifier where EmptyContent: View {
  var isEmpty: Bool
  let emptyContent: () -> EmptyContent
  
  func body(content: Content) -> some View {
    if isEmpty {
      emptyContent()
    }
    else {
      content
    }
  }
}

所有視圖修飾符都可以通過 body 函式的 content: Content 參數 (parameter) 存取操作的視圖。此外,我們還宣告了兩個屬性 (property):

  • isEmpty:讓呼叫者指示是否顯示空白狀態
  • emptyContent: 這是一個閉包 (closure),如果 isEmptytrue,就會回傳我們想顯示的視圖

如果我們要在視圖上使用這個修飾符,就要如此編寫程式碼:

Text("Hello, World!")
  .modifier(EmptyStateViewModifier(isEmpty: isEmpty, emptyContent: {
    Text("Sorry - no content available")
  }))

這樣看起來有點難使用。

添加 Extension 來完善開發者體驗

我們在 View 宣告一個 Extension,讓視圖修飾符更易於使用:

extension View {
  func emptyState<EmptyContent>(_ isEmpty: Bool,
                                emptyContent: @escaping () -> EmptyContent) -> some View where EmptyContent: View {
    modifier(EmptyStateViewModifier(isEmpty: isEmpty, emptyContent: emptyContent))
  }
}

現在我們可以按預期使用視圖修飾符。以下就是 Make It So 的主列表視圖,當中應用了視圖修飾符:

List {
  ForEach($viewModel.tasks) { $task in
    TaskListRowView(task: $task)
      .focused($focusedTask, equals: .row(id: task.id))
      .onSubmit {
        viewModel.createNewTask()
      }
      .swipeActions {
        Button(role: .destructive, action: { viewModel.deleteTask(task) }) {
          Label("Delete", systemImage: "trash")
        }
        Button(action: { viewModel.flagTask(task) }) {
          Label("Flag", systemImage: "flag")
        }
        .tint(Color(UIColor.systemOrange))
        Button(action: {}) {
          Label("Details", systemImage: "ellipsis")
        }
        .tint(Color(UIColor.systemGray))
      }
  }
}
.emptyState($viewModel.tasks.isEmpty) {
  Text("No Reminders")
    .font(.title3)
    .foregroundColor(Color.secondary)
}

你可以從這個 GitHub 程式庫中的 develop 分頁中,找到 Make It So 和視圖修飾符的源程式碼。

謝謝你的閱讀。

本篇原文(標題:Using SwiftUI View Modifiers to Display Empty State)刊登於作者 Medium,由 Peter Friese 所著,並授權翻譯及轉載。
作者簡介:Peter Friese,Google Firebase 團隊的開發者大使🔥。
譯者簡介:Kelly Chan-AppCoda 編輯小姐。

作者
AppCoda 編輯團隊
此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。
評論
更多來自 AppCoda 中文版
iOS 18 新API:使用 Navigation Transition 創建 Hero 動畫式過場
SwiftUI 框架

iOS 18 新API:使用 Navigation Transition 創建 Hero 動畫式過場

Apple 的工程師可能早已認識到,許多 iOS 開發者都希望能夠重現 App Store 應用程式中的優雅 Hero 動畫。由於從頭實現這種動畫通常需要耗費大量時間與精力,Apple 在 iOS 18 SDK 中納入了這項功能。 透過這次更新,你現在只需少量的程式碼就能在自己的應用程式中實現類似的動畫過渡效果。這項重大改進讓開發者能夠創造出更具視覺吸引力且流暢的過渡效果,
如何使用 Vision APIs 從圖像中辨識文字
AI

如何使用 Vision APIs 從圖像中辨識文字

Vision 框架長期以來一直包含文字識別功能。我們已經有詳細的教程,向你展示如何使用 Vision 框架掃描圖像並執行文字識別。之前,我們使用了 VNImageRequestHandler 和 VNRecognizeTextRequest 來從圖像中提取文字。 多年來,Vision 框架已經顯著演變。在 iOS 18 中,Vision
iOS 18更新:SwiftUI 新功能介紹
SwiftUI 框架

iOS 18更新:SwiftUI 新功能介紹

SwiftUI的技術不斷演進,每次更新都讓 iOS 應用程式開發變得更加便捷。隨著 iOS 18 Beta 的推出,SwiftUI 引入了多個令人興奮的新功能,使開發者僅需幾行程式碼即可實現出色的效果。 本教學文章旨在探索這個版本中的幾項主要改進,幫助你了解如何運用這些新功能。 浮動標籤列 (Floating Tab Bar)SwiftUI中的標籤視圖(Tab
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。