Interpolate text with custom foreground style in SwiftUI
SwiftUI lets us style portions of text by interpolating Text
inside another Text
and applying available text modifiers, such as foregroundColor()
or font()
.
Starting from iOS 17 we can apply more intricate styling to ranges within a Text
view with foregroundStyle().
For example, we can color a word with a gradient.
struct ContentView: View {
let gradient = LinearGradient(
colors: [.blue, .green],
startPoint: .leading,
endPoint: .trailing
)
var body: some View {
Text("Hello, \(Text("world").foregroundStyle(gradient))!")
.bold()
.font(.title)
.textCase(.uppercase)
}
}
And if you are interested in more advanced text styling, you can take a look at the new ShaderLibrary. In iOS 17 Metal shaders get automatically converted to ShapeStyle
s that then can be passed to foregroundStyle()
.
Check out our new book!
Swift Gems
100+ tips to take your Swift code to the next level
Swift Gems
100+ tips to take your Swift code to the next level
- Advanced Swift techniques for experienced developers bypassing basic tutorials
- Curated, actionable tips ready for immediate integration into any Swift project
- Strategies to improve code quality, structure, and performance across all platforms
- Practical Swift insights from years of development, applicable from iOS to server-side Swift