Social Preview

SwiftUI 扩展和组件，让一切都变得合理。

📦 为现代 SwiftUI 开发者提供的轻量级、Swift 风格的代码

⚙️ 数十个视图修饰符，可添加所需的功能

💨 用于视图的自定义内置过渡和动画

💻 跨平台支持 iOS、macOS、watchOS

🧩 预制组件，在任何应用程序中都看起来很棒

💕 这个包与 SwiftUIX 配合良好，并从中获得灵感！

🚧 Wiki 正在建设中。 阅读以下内容以开始使用！

GitHub release (latest SemVer) GitHub Release Date GitHub issues GitHub pull requests

什么是 ShinySwiftUI？

ShinySwiftUI 旨在将混乱的 Swift + SwiftUI 代码转化为更简洁、更 Swift 化的代码。它还旨在提供一个有用的修饰符、组件和扩展库，以创建一致且美观的应用程序。

// 😴 Before
HStack {
  ViewA()
  ViewB()
}

// ✨ After
ViewA() + ViewB()
// 😴 Before
MyView().frame(width: 30.0, height: 30.0)
MyView().frame(maxWidth: 40.0, maxHeight: 40.0)

// ✨ After
MyView().frame(30.0)
MyView().frame(max: 40.0)
// 😴 Before
MyView().onAppear {
  UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}

// ✨ After
MyView().onAppear {
  hideKeyboard()
}
// 😴 Before
MyView().overlay(RoundedRectangle(cornerRadius: 5.0).stroke(.red, lineWidth: 2.0))

// ✨ After
MyView().roundedBorder(.red, cornerRadius: 5.0, lineWidth: 2.0)

已完成的功能

以上大多数功能都是跨平台的，并且在 iOS 和 macOS 上都受支持。

开始使用

使用 Swift Package Manager 将 ShinySwiftUI 添加到您的项目中

https://github.com/Flowductive/shiny-swift-ui

📐 应用程序布局功能

预定义的间距值

使用 CGFloat 间距值提高代码一致性

MyView().padding(.m).cornerRadius(.xs)

这些值包括：.xxs、.xs、.s、.m、.l。.xl 和 .xxl。

使用通用堆栈进行布局

您可以使用通用堆栈或 GStack，通过 Bool 输入垂直或水平定位项目

GStack(platform == .iOS ? .vertical : .horizontal) {
  MyViewA()
  MyViewB()
}

GStack 的典型用例是更改 macOS 与 iOS 设备上的显示布局。

使用 Shove View 进行布局

使用 ShoveView 快速将内部内容推到一侧/角落

// Position MyView right
ShoveView(.trailing) {
  MyView()
}

// Position MyView top-left
ShoveView(.topLeading) {
  MyView()
}

固定宽度的间隔

使用固定宽度的间隔来实现一致的间距

// Large vertical spacer
Spacer.VL

// Extra-small vertical spacer
Spacer.HXS

垂直间隔变体包括 .VXXS、.VXS、.VS、.VM、.VL、.VXL 和 .VXXL。 水平间隔变体包括 .HXXS、.HXS、.HS、.HM、.HL、.HXL 和 .HXXL。

⚙️ 视图功能

视图上的操作

您可以使用运算符快速对视图进行分组

// Horizontal stack
MyViewA() + MyViewB()

// Vertical stack, center-aligned
MyViewA() / MyViewB()

// Vertical stack, left-aligned
MyViewA() /- MyViewB();

视图框架修饰符

轻松设置正方形框架的尺寸

// Sets MyView's frame to width = 30.0, height = 30.0
MyView().frame(30.0)

拉伸视图

// Stretch horizontally
MyViewA().stretchH()

// Stretch vertically
MyViewB().stretchV()

// Stretch in both directions
MyViewC().stretch()

视图刷新修饰符

使用 @State 布尔值快速刷新视图

@State var refresh: Bool = false

var body {
  MyView().refreshable(with: refresh)
}

更新视图需要调用 refresh.toggle()。

视图样式修饰符

设置视图的相对不透明度

MyView().opacity(.half)

您可以从（按不透明度顺序）.opaque、.most、.half、.quarter、.almostInvisible、.invisible 中进行选择。

向任何视图添加圆角边框

MyViewA().roundedBorder(.green)
MyViewB().roundedBorder(.red, cornerRadius: .s, lineWidth: 2.0)

视图时间修饰符

在指定的时间间隔内重复执行操作

MyView().every(3.0) {
  print("Hello") // Runs every 3 seconds
}

在指定的延迟后执行操作

MyView().after(3.0) {
  print("Hello") // Runs 3 seconds after the view appears
}

自定义动画/过渡

使用 .slickAnimation(value:) 向视图添加流畅的过渡

MyViewA().slickAnimation()
MyViewB().slickAnimation(value: myVal)

添加自定义内置动画； 例如 .slickEaseOut、.slickEaseIn、.rampEaseOut、.rampEaseIn、.bounce、.lightBounce 或 .page

MyViewA().animation(.rampEaseOut)
MyViewB().animation(.slickEaseOut(duration: 1.0), value: myVal)

添加自定义内置过渡； 例如 .turn、.swipe、.pop

MyViewA().transition(.turn)

调试视图修饰符

使用 .debug() 视图修饰符随机更改视图的背景颜色以进行调试

MyView().debug()

屏幕截图视图方法

截取视图的屏幕截图并将图像保存到路径

myView.snapshot()

悬停工具提示修饰符 (macOS)

在悬停时向视图添加工具提示

MyView()
.withTooltip(present: $showTooltip) {
  Text("This is a tooltip!")
}

添加键盘快捷键，它会自动添加快捷键工具提示

MyViewA().shortcut("c", modifiers: [.shift, .command])
MyViewB().shortcut(.defaultAction)

视图鼠标位置检查 (macOS)

跟踪鼠标指针在视图内的相对位置

MyView().trackingMouse { pos in
  // ...
}

🎁 其他功能

颜色特性

利用颜色实用程序

// Init color from hex code
var color = Color(hex: "#ffffff")

// If bindingBool.wrappedValue is true, show the color
MyView().foregroundColor(.red.if($bindingBool))

// Get a lighter version of a color
lighter = color.ligher(by: 0.3)

// Colors also have relative opacities, just like views
halfColor = color.opacity(.half)

导入 ShinySwiftUI 时，颜色也将符合 Codable。

视觉效果

轻松添加 UIVisualEffectView 的 SwiftUI 包装器

VisualEffectView()