Learn Courses My Dashboard

Why .background(View)

App Development
#1

My original question was going to be about View in background(View). In the development environment I selected some text, then in the inspector I added a new Modifier, background, and selected a color from the drop down. My code became background(View). Didn’t make much sense. I think there is a structure in swift called View. In my code I reference it. The View in the modifier was highlighted and the other ones were not. I deleted the line and typed .background(View) and Swift complained that View didn’t match. I bit the bullet and started this post, did a copy and paste, and other text appeared as if my magic.

So, what’s the story? Why does the development environment hide stuff? Why is the hidden stuff much more complex than color.red? How do I see what is there, other than copy paste to some other text editor? How do I change it, in the IDE text editor?

One principal I try to work with in UIs is to not surprise the user. I spend quite a bit of time puzzling over the use of View when I could clearly see that View was a structure that I did not think belonged here. Where was the color I selected? I changed the color in the inspector and the source did not change. I quit the IDE and restarted it and the color stayed, so I was being saved someplace. A right click on View did not help. I was completely suprised to find out how it worked, at least in part cause I still have questions.

#2

When you add .background(View) the View part is a placeholder for you to fill in with a value. It’s called View as a hint to what you should be putting there. i.e., the background modifier takes in a View. In your case, you would replace the View placeholder with color.red.

When you say “other text appeared as if my [sic] magic”, I assume you are talking about something like this:

.background(/*@START_MENU_TOKEN@*//*@PLACEHOLDER=View@*/Color.blue/*@END_MENU_TOKEN@*/)

The part that reads /*@START_MENU_TOKEN@*//*@PLACEHOLDER=View@*/Color.blue/*@END_MENU_TOKEN@*/ is a token in the code template inserted when you selected the background modifier in the inspector. Xcode translates these tokens into editor placeholder hints so that you know what you need to supply, in this case something that conforms to the View protocol. Placeholders get transformed into this by Xcode:

xcode_placeholder

So that’s why Xcode doesn’t show the tokens. But why do you see them when you paste into your web browser to make a post here? Because your browser doesn’t know what to do with tokens and just displays the plain text.

And now you know…

#3

Thank you very much. It’s a lovely explanation and allows me to understand what is going on.

I am left with just one problem. How do I see/update what is there. It started when I used the preview to give a field a red background. I added the background modifier and selected red from the dropdown. It worked fine. The “problem” was that the code got background(View). I could select the field in the proview and change the color, but if I wanted to use the code to change the color I could not.

is there, I’m sure there is but I can’t find it, some way to see what’s represented by View, and other tokens I have not seen yet, update it, and easily replace the token with the current code.

In this example I would like to change /*@start… with the Color.blue, so I can see/change it in the editor. I would accept being able to see the whole thing, copy the Color.blue part, and paste it back into the editor. As a last resort I would like to see the underlying code and and modify it. I know I can just select View and type in what I want to replace it with, but that is a lot of typing and it already has Color.red. I tried googling “swift token” and all the results were about security tokens.