SwiftUI - 交互式侧边栏

iOS SwiftUI

字数统计: 228阅读时长: 1 min

 2024/04/01   Share







SwiftUI -交互式侧边栏

Interactive Side Menu

效果

UI 设计

页面架构

SideMenu 部分

sideMenu页面内容

Tab 枚举配置

enum Tab: String, CaseIterable {
    case home = "house.fill"
    case bookmark = "book.fill"
    case favourites = "heart.fill"
    case profile = "person.crop.circle"
    case logout = "rectangle.portrait.and.arrow.forward.fill"

    var title: String {
        switch self {
            case .home: return "Home"
            case .bookmark: return "Bookmark"
            case .favourites: return "Favourites"
            case .profile: return "Profile"
            case .logout: return "Logout"
        }
    }
}

头部声明

SideBar所需头部声明

主体部分

SIdeBar主体部分

内容部分多一个蒙层可点击(收起sideMenu)

显示侧边栏的时候多一个蒙层

3d旋转动画

3d旋转动画

内容部分左上角按钮动画效果

内容部分左上角按钮动画

==到这里==, 预览时能够看到内容部分, 在通过 dragGesture 拖拽的时候, 随之而来有一个 3D 旋转动画.

内容部分, 多一些设置

有圆角；

层提供展开点击可收回 sideMenu；

showMenu按钮的动画。

sideBar展开收起逻辑

多处手势添加

状态设置

状态部分设置

原文作者：杨庆

原文链接：http://www.yqblog.cn/2024/04/01/%E4%BA%A4%E4%BA%92%E5%BC%8F%E4%BE%A7%E8%BE%B9%E6%A0%8F/

发表日期：April 1st 2024, 12:37:14 pm

更新日期：September 22nd 2024, 1:58:20 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

Next Post

SwiftUI-LimitedTextField
Previous Post

SwiftUI - 网络获取json并分页展示

CATALOG

1. SwiftUI -交互式侧边栏
1. 1.0.1. 效果
2. 1.0.2. UI 设计
  1. 1.0.2.1. SideMenu 部分
1.1. SideBar 部分

