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更新:SwiftUI 新功能介紹
SwiftUI 框架

iOS 18更新:SwiftUI 新功能介紹

SwiftUI的技術不斷演進,每次更新都讓 iOS 應用程式開發變得更加便捷。隨著 iOS 18 Beta 的推出,SwiftUI 引入了多個令人興奮的新功能,使開發者僅需幾行程式碼即可實現出色的效果。 本教學文章旨在探索這個版本中的幾項主要改進,幫助你了解如何運用這些新功能。 浮動標籤列 (Floating Tab Bar)SwiftUI中的標籤視圖(Tab
如何使用 Swift 整合 Google Gemini AI
SwiftUI 框架

如何使用 Swift 整合 Google Gemini AI

在即將到來的 WWDC,Apple 預計將會發佈一個本地端的大型語言模型 (LLM)。 接下來的 iOS SDK 版本將讓開發者更輕易地整合 AI 功能至他們的應用程式中。然而,當我們正在等待 Apple 推出自家的生成 AI 模型時,其他公司(如 OpenAI
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。