EasySkeleton

SwiftUI 的快速轻量级骨架框架！

如何使用

我们使用一个简单的环境系统来传递有关骨架的信息给所有视图，但您应该告诉您的布局应该在哪里以及如何显示它。一些例子

import EasySkeleton

struct ContentView: View {

    @State private var isLoading = true
    
    var body: some View {
        VStack {
            Text("Some title")
                .skeletonable() // This text will be skeletonable 
                
            Text("Body")
                .skeletonable() // This text will be skeletonable too
        }
        .setSkeleton($isLoading) // Control skeletonable state
    }
}

但是，如果您想设计自己的骨架呢？您可以使用修饰符来实现

Text("Some title")
    .skeletonable()
    .skeletonCornerRadius(16) // Your skeleton will be rounded. Great!

如果，例如，您想使用自定义样式或动画呢？很简单！只需在 setSkeleton 方法中使用额外的参数

struct ContentView {

    @State private var isLoading = true

    var body: some View {
        VStack {
            /// ...
        }
        .setSkeleton(
            $isLoading,
            animationType: .solid(Color.blue), // by default is .gradient(Color.skeleton.makeGradient())
            animation: Animation.default, // Default animation
            transition: AnyTransition.opacity // Transition how skeleton appears or disappers.
        )
    }   

}

要在子视图中禁用骨架，只需调用 unskeletonable 方法

struct Row {

    var body: some View {
        VStack {
            /// ...
        }
        .unskeletonable() // Your view will not be skeletonable 
    }   

}

struct ContentView: View {
    var body: some View {
        Row()
            .skeletonable() // Doesn't apply on Row 
    }   
}

EasySkeleton 非常适合与 ForEach 循环一起使用。您可以应用原生的 ForEach 并使用 skeletonForEach 修饰符对其进行修改

struct NewsView: View {
    var body: some View {
        ForEach(items) {
            NewsRow(item: $0)
        }
        .skeletonForEach(itemsCount: 4) { _ in // only applies on ForEach component to avoid using `SkeletonForEach` or similar component
            NewsRow()
                .skeletonFrame(height: 56) // Set frame for skeleton overlay, but also, you can set native `frame()` modifier.
        }
    }   
}

最后，但并非最不重要！主要的核心功能：使用环境特性即时读取您的骨架状态！

struct Header: View {

    @Environment(\.skeleton) private var skeleton // You can grab skeleton state from any view!

    var body: some View {
        Button("Press to me") {
            /// ...
        }
        .disabled(skeleton.isSkeletonActive) // Control your layout when skeleton is active!
    }
}

贡献

欢迎您更改这个库，我希望我们能为任何开发者打造最好的工具！