How to mark content as a placeholder using redacted()
How to mark content as a placeholder using redacted() 관련
Updated for Xcode 15
SwiftUI lets us mark text as a placeholder in our view, meaning that it gets rendered but masked out with gray to show it isn't final content. This is provided through the redacted(reason:)
modifier, along with an unredacted()
modifier you can use to override redaction as needed.
Here's how it looks in code:
Text("This is placeholder text")
.font(.title)
.redacted(reason: .placeholder)
![A long gray rectangle representing redacted text.](https://hackingwithswift.com/img/books/quick-start/swiftui/how-to-mark-content-as-a-placeholder-using-redacted-1~dark.png)
You can redact several things in your view at once, just by using redacted(reason:)
on a container, like this:
VStack {
Text("This is placeholder text")
Text("And so is this")
}
.font(.title)
.redacted(reason: .placeholder)
Two gray rectangles representing two lines of redacted text.
Apple has said that redaction is an additive process, meaning that if you add redaction reasons to both a parent and a child then they will combine. Right now there's only .placeholder
, but perhaps we'll see pixellation or similar in the future?
You can also query any redaction reasons passed in from the environment like this:
struct ContentView: View {
@Environment(\.redactionReasons) var redactionReasons
let bio = "The rain in Spain falls mainly on the Spaniards"
var body: some View {
if redactionReasons == .placeholder {
Text("Loading…")
} else {
Text(bio)
.redacted(reason: redactionReasons)
}
}
}
![The unredacted text “The rain in Spain falls mainly on the Spaniards”.](https://hackingwithswift.com/img/books/quick-start/swiftui/how-to-mark-content-as-a-placeholder-using-redacted-3~dark.png)
![Placeholder text “Loading...” standing in for redacted text.](https://hackingwithswift.com/img/books/quick-start/swiftui/how-to-mark-content-as-a-placeholder-using-redacted-4~dark.png)
Tips
Redaction also works on images using the same code as shown above.