UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Day 23 project 3 part 1 custom modifiers watermark modifier is not in the right location.

Forums > 100 Days of SwiftUI

When I enter in the code of the instructor for custom modifiers for watermarked it does not show up in the lower right hand corner of the blue rectangle. It shows up in another content view in the preview and and below the blue box in the ios simuator.

images of project 3 issues

import SwiftUI

struct Watermark: ViewModifier
{
    var text: String

    func body(content: Content) -> some View {
        content

        Text(text)
            .font(.caption)
            .foregroundStyle(.white)
            .padding(5)
            .background(.black)
    }
}

extension View
{
    func watermarked(with text: String) -> some View
    {
        modifier(Watermark(text: text))
    }
}

struct Title: ViewModifier
{
    func body(content: Content) -> some View
    {
        content
            .font(.largeTitle)
            .foregroundStyle(.white)
            .padding()
            .background(.blue)
            .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

extension View
{
    func titleStyle() -> some View
    {
        modifier(Title())
    }
}

struct ContentView: View
{

    var body: some View
    {
        Color.blue
            .frame(width: 300, height: 200)
            .watermarked(with: "Hacking with swift")
    }
}

struct ContentView_Previews: PreviewProvider
{
    static var previews: some View
    {
        ContentView()
    }
}

2      

@morpheus doesn't have the complete view of their problem....

custom modifiers for watermarked it does not show up in the lower right hand corner of the blue rectangle.

Please review your code below and note that you are providing TWO views in this body function. However, you're telling the compiler that it should only draw ONE view.

// Here you tell the compiler that body returns some view.
// A body view must return ONE and only one view.
// A view is something that you will SEE on the screen.

// You pass in a variable that is, in itself, a valid view. 
// You give this view a name, calling it content
func body(content: Content) -> some View {

        // View #1
        content  // <-- here you are saying DRAW the view you passed in.

        // View #2
        // --- THEN you say draw a text box with some nice style.
        Text(text)
            .font(.caption)
            .foregroundStyle(.white)
            .padding(5)
            .background(.black)
    }

The XCode preview is more forgiving than a simulator. Instead of complaining, the preview will show you both views, but in two separate preview windows.

How might you combine the two views into one view? Consider your options! Please return here and tell us your solution.

Keep coding!

2      

Please review your code below and note that you are providing TWO views in this body function. However, you're telling the compiler that it should only draw ONE view.

I'm not following. I thought I typed in the code the same way as the instructor. How am I providing two views?

2      

I figured it out. The instructor added a ZStack to the code and that presented one view.

struct Watermark: ViewModifier
{
    var text: String

    func body(content: Content) -> some View
    {
        ZStack(alignment: .bottomTrailing)
        {
            content

            Text(text)
                .font(.caption)
                .foregroundStyle(.white)
                .padding(5)
                .background(.black)
        }
    }
}

3      

I figured it out. The instructor added a ZStack to the code and that presented one view.

Well done!

I could have just given you the answer. But I think you learn more trying to seek the answer.

Do you see now? Do you understand how you were asking the compiler to draw TWO views?

What did the ZStack do? It combined your two views into one ZStack view as you noted.

Keep coding

Also, please mark an answer as Solved.

2      

While @Obelix is kind of right with

It combined your two views into one ZStack view as you noted.

It put second View on top of the first View (Depth). This might be important in other projects to understand this. Similar to way VStacks (Vertical) and HStacks (Horizontal) work. Well done for working it out.

Note that always check your code it so easy to miss something then it will not work as expected!

   

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.