【SwiftUI模块】0054、SwiftUI中使用分页、轮播列表、页面控件、自定义分段控件、自定义堆栈控件来创建复杂的UI

SwiftUI模块系列 - 已更新54篇
SwiftUI项目 - 已更新4个项目
往期Demo源码下载

技术:SwiftUI、SwiftUI4.0、分页、轮播列表、页面控件、自定义分段控件、自定义对战控件
运行环境:
SwiftUI4.0 + Xcode14 + MacOS12.6 + iPhone Simulator iPhone 14 Pro Max

概述

使用SwiftUI做一个一个类似微博、网易云、抖音个人页面的头部下拉放大图片 - 效果

详细

一、运行效果

二、项目结构图

三、程序实现 - 过程

思路:
1.创建头部模块 进行测试上下滚动拥有放大缩小效果
2.搭建分类模块 固定在头部下面
3.搭建列表模块
4.监听滚动偏移的操作

1.创建一个项目命名为 SpotifyResponvieUI

1.1.引入资源文件和颜色

颜色
BG #281A1A
Green #4DD037
随机图片9张
个人大图背景1张
logo1张

2. 创建一个虚拟文件New Group 命名为 View

3. 创建一个虚拟文件New Group 命名为 Model

4. 创建一个文件New File 选择SwiftUI View类型 命名为Album 并且继承Identifiable

5. 创建一个文件New File 选择SwiftUI View类型 命名为Home

主要是:

6. 创建一个文件New File 选择SwiftUI View类型 命名为OffsetModifier

Code

ContentView - 主窗口

主要是展示主窗口Home和设置暗黑模式

import SwiftUI

struct ContentView: View {
   
    var body: some View {
   
        Home()
        // 永远是黑暗模式
            .preferredColorScheme(.dark)
    }
    
}

struct ContentView_Previews: PreviewProvider {
   
    static var previews: some View {
   
        ContentView()
    }
}

Home - 主页

思路

1. 主要就是展示大图背景 + 固定的分类 + 列表模块

//
//  Home.swift
//  SpotifyResponvieUI (iOS)
//
//  Created by lyh on 2022/8/23.
//

import SwiftUI

struct Home: View {
   
    @State var currentType: String = "Popular"
    // 光滑滑动效果
    @Namespace var animation
    @State var _albums: [Album] = albums
    
    // x,y
    @State var headerOffsets: (CGFloat,CGFloat) = (0,0)
    
    var body: some View {
   
        ScrollView(.vertical, showsIndicators: false) {
   
            VStack(spacing: 0){
   
                HeaderView()
                // 带内容的固定标题
                LazyVStack(pinnedViews: [.sectionHeaders]) {
   
                    Section {
   
                        SongList()
                    } header: {
   
                        PinnedHeaderView()
                            .background(Color.black)
                            .offset(y: headerOffsets.1 > 0 ? 0 : -headerOffsets.1 / 8)
                            .modifier(OffsetModifier(offset: $headerOffsets.0, returnFromStart: false))
                            .modifier(OffsetModifier(offset: $headerOffsets.1))
                    }
                }
            }
        }
        .overlay(content: {