来源：AI开发日志公众号专辑「Build Your Own X With AI」
原文链接：https://mp.weixin.qq.com/s?__biz=MzUxMjg3MjE2OA==&mid=2247485742&idx=1&sn=84db2a8e41f5f4d8e0dee5cd23c1ad79&chksm=f95c92a9ce2b1bbfac2f2030b6a1d4807f6c4b04ccbee983f325cb4f474755ff7f2388b2ef33#rd
Moment
A SwiftUI-based iOS application implementing a WeChat-like Moments feed feature that allows users to post text and images, like posts, and filter content by date.
Features
Social feed display with user posts
Posting with text and images (up to 9 per post)
Like functionality for posts
Date filtering using calendar view
Pull to refresh for updating feed
Data persistence using UserDefaults and file system
User profile header with post count
Technology Stack
Swift
SwiftUI
UserDefaults for data persistence
File system storage for images
UIKit (for UIImage handling)
Architecture Overview
The application follows a MVVM (Model-View-ViewModel) architecture pattern with the following key components:
Data Models
User Model
id: String
name: String
avatarName: String
postsCount: Int
Moment Model
id: String
userId: String
userName: String
userAvatarName: String
timestamp: Date
content: String
imagePaths: [String]
likes: [String]
Core Components
Views
MomentsFeedView: Main feed displaying moments
MomentPostView: Individual moment display
NewPostView: Interface for creating new moments
ProfileHeaderView: User profile header
ImageGridView: Grid layout for images
ViewModels & Services
MomentStore: State management and business logic
StorageManager: UserDefaults persistence
ImageStorageManager: Image file management
Key Components Details
Moments Feed Functionality
Displays a scrollable feed of moments from the current user
Shows user profile header with post count
Supports pull-to-refresh to update the feed
Allows filtering moments by specific dates using a calendar view
Posting System with Image Handling
Users can create new posts with text content and up to 9 images
Images are selected through the system image picker
Images are saved to the app’s documents directory
Image paths are stored with each moment for later retrieval
Data Persistence Mechanisms
User data and moment metadata are stored using UserDefaults
Images are stored as JPEG files in the app’s documents directory
MomentStore coordinates between the UI and persistence layers
Sample data is generated on first launch for demonstration purposes
Usage Instructions
How to View Moments
Launch the app to see the main Moments feed
Scroll through the feed to view all moments
Tap on any image in a post to view it in full screen
Use the calendar icon in the top right to filter moments by date
Pull down on the feed to refresh and update the content
How to Create Moments
Tap the plus icon in the top left to open the new post screen
Type your message in the text area
Tap “Add Photos” to select images from your photo library (up to 9)
Tap “Submit” to post your moment
Your new post will appear at the top of the feed
How to Like Moments
In the Moments feed, find the post you want to like
Tap the heart icon below the post content
The heart will turn red and the like count will increase
Tap the heart again to unlike the post
How to Filter by Date
Tap the calendar icon in the top right of the feed
Select a date from the calendar view
The feed will update to show only moments from that date
Tap “Show All” to return to the full feed
Code Structure
Moment/
├── MomentApp.swift # App entry point
├── ContentView.swift # Main content view
├── Models.swift # Data models (User, Moment)
├── MomentStore.swift # ViewModel for state management
├── StorageManager.swift # UserDefaults persistence
├── ImageStorageManager.swift # Image file management
├── MomentsFeedView.swift # Main feed view
├── MomentPostView.swift # Individual moment view
├── PostHeaderView.swift # Header for each post
├── PostContentView.swift # Content area of posts
├── PostActionsView.swift # Like button and actions
├── ImageGridView.swift # Grid layout for images
├── NewPostView.swift # New post creation view
├── ImagePicker.swift # System image picker integration
├── ProfileHeaderView.swift # User profile header
├── CalendarNavigationView.swift # Date filtering calendar
└── Preview files # Preview providers for Xcode previews
Implementation Details
Image Management Approach
Images are stored in the app’s documents directory as JPEG files
Each image is saved with a unique UUID filename to prevent conflicts
Image paths are stored relative to the documents directory for portability
When a post is deleted, associated images are also removed from storage
A cleanup mechanism ensures unused images are removed periodically
Date Filtering Mechanism
Uses Calendar API to compare dates at the day level
CalendarNavigationView provides a user-friendly date selection interface
Filtering preserves the original moment order while showing only matching dates
Users can easily return to the full feed using the “Show All” button
Like System Functionality
Likes are tracked by storing user IDs in each moment’s likes array
The UI updates immediately when a user likes/unlikes a post
Like counts are calculated dynamically from the likes array
User-specific like states are determined by checking if the current user’s ID is in the likes array