What's up everyone I'm Nick. This is the first video in the course that we're going to actually do some coding so I'm super excited to share with you guys.
大家好吗？我是尼克。这是课程中的第一个视频，我们将实际进行一些编码，所以我非常兴奋能与你们分享。
In this video we're going to look at adding text to the screen. Now if you've used Swift UI before, if you have dabbled you probably know how easy it is to add text to the screen.
在本视频中，我们将学习向屏幕添加文本。现在，如果您以前使用过Swift UI，如果您涉足过，您可能知道向屏幕添加文本有多容易。
But you might not know some of the cool things that we can do to the text component. So we're going to look at how we can change the text from just plain text to adding different fonts, different colors.
但是你可能不知道我们可以对文本组件做一些很酷的事情。所以我们将看看如何将文本从纯文本更改为添加不同的字体，不同的颜色。
We can make a different sizes. We can change the character spacing, the line spacing, a whole bunch of really cool things, mostly formatting but important stuff to know.
我们可以做不同的尺寸。我们可以改变字符行间距，行距，一大堆非常酷的东西，主要是格式，但重要的是要知道。
I apologize in advance if this sounds super, super basic but we have to cover the basics before we get into the cool stuff. So this should be a quick and easy starting point for the course.
如果这听起来非常非常基本，我提前道歉，但是在我们进入酷的东西之前，我们必须涵盖基础知识。所以这应该是课程的一个快速简单的起点。
Without further ado, let's open up Xcode and get into it.
事不宜迟，让我们打开Xcode并进入其中。
Alright, so I am back in our Xcode project that we made in the last video and I'm going to create a new file for all the code that we're going to do in this video.
好的，所以我回到了我们在上一个视频中制作的Xcode项目，我将为我们将在这个视频中执行的所有代码创建一个新文件。
So let's do that by right clicking in the project navigator over on the left side here and I'm going to create a new file.
让我们右键单击左侧的项目导航器，我将创建一个新文件。
This is going to be a Swift UI view and I'm going to call it text bootcamp.
这将是一个Swift UI视图，我将称之为文本训练营。
So when we create a new file, it comes already preloaded with a text inside and we can see this text in our canvas on the right side here.
所以当我们创建一个新文件时，它里面已经预装了一个文本，我们可以在右边的画布中看到这个文本。
Let's hit the resume button to get the canvas all connected.
让我们点击恢复按钮来连接画布。
And we can see that the text says hello world and on the right side our preview says the same.
我们可以看到文字上写着hello world，在右侧，我们的预览也写着同样的内容。
Now again, I showed you in the last video we could have typed this in text with the parentheses or we could have used the library in the top right corner by hitting that plus sign and finding a text and then double clicking that to add it to our screen.
现在，我在最后一个视频中向您展示了我们可以用括号输入文本，或者我们可以使用右上角的库，点击那个加号并找到一个文本，然后双击它将其添加到我们的屏幕上。
But of course we already have this text in here.
当然，我们这里已经有这段文字了。
So now we can start modifying it and that's what this video is all about. It's how to make this very basic text look really cool for all of our applications.
所以现在我们可以开始修改它，这就是这个视频的全部内容。这是如何让这个非常基本的文本在我们所有的应用程序中看起来非常酷。
And the most obvious most common thing that we want to do to text is change the font because right now is just this very basic default font.
最明显的，最常见的我们想对文本做的事情就是改变字体，因为现在只是这个非常基本的默认字体。
So if I click on to this text and I open up the inspector on the right side here, we can then see some of the modifiers that we can add to this text.
所以如果我点击这篇文章，打开右边的检查员，然后我们可以看到一些修饰符，我们可以添加到这个文本中。
Now of course we can type these in directly but if you're a beginner, this is a great place to get started and you can see here that we can change the font.
当然，我们可以直接输入这些，但是如果你是初学者，这是一个很好的开始，你可以在这里看到我们可以改变字体。
And Xcode comes by default with a bunch of font sizes for us already. So instead of putting font size 12 or 32, we can just use font title and it will be a size that a title would actually be.
Xcode默认已经为我们提供了一堆字体大小。所以我们可以使用字体标题，而不是字体大小12或32，它将是标题实际的大小。
And this is really handy when we start coding and you can see that when we click that title, the modifier actually added itself to our code.
当我们开始编码时，这真的很方便，您可以看到当我们单击该标题时，修饰符实际上将自己添加到我们的代码中。
Now as we start coding, I'm going to start adding more and more modifiers to this file. And in SwiftUI, basically you can add modifiers to any component.
现在当我们开始编码时，我将开始向这个文件添加越来越多的修饰符。在SwiftUI中，基本上您可以向任何组件添加修饰符。
So this is the component. This is the modifier by using dot notation. So right after this parentheses at the end of the component, you can press the dot.
这就是组件。这是使用点表示法的修饰符。所以就在组件末尾的括号之后，你可以按点。
And then you have all the modifier options that you can have for this component.
然后你有这个组件的所有修饰符选项。
Now putting it right after the parentheses or putting it on the next line like it is here does the same thing.
现在把它放在括号后面或者像这样放在下一行也会做同样的事情。
As long as there is no other code between this component and this modifier, it will work the same.
只要这个组件和这个修饰符之间没有其他代码，它的工作方式都是一样的。
And the reason we put it on a second line instead of putting it here is because if you had a whole bunch of modifiers, it might get hard to read.
我们把它放在第二行而不是放在这里的原因是因为如果你有一大堆修饰符，可能会很难阅读。
But if you had a whole bunch and you had them nicely indented like this, it makes it a little easier.
但是如果你有一大堆，你把它们像这样很好地缩进，这会让事情变得容易一点。
So that's what I'm going to do as we get going. But right now let's just take a look at this font. We can change these fonts.
这就是我们要做的。但是现在让我们来看看这个字体。我们可以改变这些字体。
You can see right now it's pretty large. We could also do a smaller font like caption.
你现在可以看到它相当大。我们也可以做一个更小的字体，比如标题。
And it's nice and small. So we can easily change our font sizes by just calling dot font and then caption.
它又好又小。所以我们可以通过调用点字体和标题来轻松更改字体大小。
I'm going to change this back to body, which is the default.
我要把这个改回body，这是默认的。
And then let's add another modifier. So I'm going to press enter tab over and the next one we're going to look at is font weight.
然后让我们添加另一个修饰符。所以我要按回车键，下一个我们要看的是字体重量。
So type in font weight and we get this nice completion here. I'll hit enter on that. And then when we use the dot inside here, we get all of the weights.
所以输入字体重量，我们在这里得到了很好的完成。我会按回车键。然后当我们使用这里的点时，我们得到了所有的权重。
Now if font weight is just the thickness of each letter. So if we did heavy, which is really thick,
现在如果字体重量只是每个字母的厚度。所以如果我们做重的，真的很厚，
we can see that the letters will update to be pretty thick. And of course, you can change this to whatever you want in order from ultra light being thinnest all the way to black, which is the thickest.
我们可以看到字母会更新得很厚。当然，你可以把它换成你想要的任何东西，从超轻最薄一直到黑色，这是最厚的。
So ultra light, our text is nice and thin. I find myself using dot medium and dot semi bold a lot. I think they look very nice in applications.
所以超轻，我们的文字又好又薄。我发现自己经常使用点中号和点半粗体。我认为它们在应用程序中看起来非常好。
Now I'm going to comment this font weight out. I don't want to delete it just so we know that it's still here. So in Swift, I can use two backslashes like this to comment it out.
现在我要把这个字体重量注释掉。我不想删除它，只是为了让我们知道它还在这里。所以在Swift中，我可以使用两个这样的反斜杠来注释它。
And it will turn gray. And that basically means that it will not compile in our code. So I can still have this code written here, but it's not actually going to be included in here.
它会变成灰色。这基本上意味着它不会在我们的代码中编译。所以我仍然可以在这里写这段代码，但它实际上不会包含在这里。
So you can see that the font weight of semi bold is not actually included on the preview. So moving on, I'm going to start using some other modifiers. Instead of font weight, we could also just call dot bold directly.
所以你可以看到半粗体的字体权重实际上并没有包含在预览中。所以继续，我将开始使用一些其他修饰符。我们也可以直接调用点粗体来代替字体权重。
And that will bold whatever our current text is. We can also call dot underline.
无论我们目前的文本是什么，这都将加粗。我们也可以称之为点下划线。
Now add an underlying to the text and of course dot italic makes it nice and italic. And one more we can do is dot strike through, which is not very common in apps, but you can add that line through your text.
现在给文本添加一个底层，当然点斜体字会让它变得漂亮和斜体字。我们还可以做的一件事是点划线，这在应用程序中并不常见，但是你可以通过你的文本添加这一行。
Now while we're here, I just want to mention that the underlying and the strike through can be customized. So I'm going to comment this underlying out.
当我们在这里的时候，我只想提一下，底层和穿透可以定制。所以我要把这个底层注释出来。
And I'm going to call it dot underlying again, but this time I'm going to use the second completion here that has a color option. And when I click enter on that, it then lets us say, do we want the underlying true?
我将再次称之为点底层，但是这次我将在这里使用第二个完成，它有一个颜色选项。当我点击回车键时，它会让我们说，我们想要潜在的真实吗？
And what color do we want the underlying to be right now it's black by default, but I can change it to color dot red.
我们现在希望底层是什么颜色？默认情况下是黑色的，但我可以将其更改为点红色。
And now we have a red underlying we can do the same thing for the strike through. So I can type in strike through.
现在我们有了一个红色的底层，我们可以对罢工做同样的事情。所以我可以输入罢工通过。
And instead of using the first one, we'll use the second one with a color option. So do we want it true? And then we can do color dot green.
我们将使用带有颜色选项的第二个，而不是使用第一个。那么我们想要它是真的吗？然后我们可以做颜色点绿色。
So these are some really cool ways to modify your text pretty easily. And if you're a beginner developer, I would highly recommend using just the dot font and the dot font weight.
所以这些是一些非常酷的方法来很容易地修改你的文本。如果你是初学者，我强烈建议只使用点字体和点字体权重。
And that pretty much will encompass all of the font sizing and thickness that you're really going to need in a basic app.
这几乎涵盖了基本应用程序中真正需要的所有字体大小和厚度。
But I do want to show you guys some more complex ways that you can do it if you want to get a little more detail oriented.
但是我确实想向你们展示一些更复杂的方法，如果你想更注重细节的话，你可以这样做。
So I'm going to comment all of this out by using the double backslash. I'll do it down here as well.
所以我要用双反斜杠来注释所有这些。我也会在这里做。
And one other trick you can do in Swift UI is if you hold the shift button and select several rows, you can then press command and backslash.
你可以在Swift UI中做的另一个技巧是，如果你按住shift按钮并选择几行，然后你可以按命令和反斜杠。
And that will automatically add the backslash is to all of those lines that you're highlighted.
这将自动将反斜杠is添加到您突出显示的所有行。
We can also then uncomment them out by highlighting them the rows again. And then pressing command backslash.
然后，我们也可以通过再次突出显示行来取消注释它们。然后按命令反斜杠。
And it will bring it back into our code. But for now, let's leave it commented out. And let's look at another way to change the font.
它会把它带回我们的代码中。但是现在，让我们把它注释掉。让我们看看改变字体的另一种方法。
We can call dot font. And this time, instead of using these dot title call out caption, we're going to call dot system.
我们可以称之为点字体。这一次，我们将调用点系统，而不是使用这些点标题调用标题。
And we have several completions on what kind of system font we want to use. And let's click the one with the size, weight, and design option.
我们有几个关于我们想要使用什么样的系统字体的完成。让我们点击有大小、重量和设计选项的那个。
Let's hit enter. And firstly, it's asking us for size. Now this is the same as if you were in Microsoft Word.
让我们按回车键。首先，它向我们询问大小。现在这与您在Microsoft Word中的情况相同。
And you wanted to change your font size. So we can do font size 24. And then it's going to ask us for weight.
你想改变你的字体大小。所以我们可以做24号字体。然后它会问我们重量。
This is the same as the font weight that we did earlier. So let's do dot semi bold. And lastly, it's going to ask us for design.
这与我们之前做的字体权重相同。所以让我们做点半粗体。最后，它会要求我们进行设计。
Now in the design, we have four options that come default into SwiftUI. And these are basically just different fonts themselves.
现在在设计中，我们有四个SwiftUI默认选项。这些基本上只是不同的字体本身。
So the default is what we were using. But we could also change to monospace, which will look a little different.
所以默认是我们使用的。但是我们也可以换成等宽的，看起来会有点不同。
We can do dot around it. And dot surf.
我们可以在它周围做点。和点冲浪。
Now there is a way to add custom fonts to your project. But that's a little more advanced. And I'm going to get into that in another video.
现在有一种方法可以将自定义字体添加到您的项目中。但那更高级一点。我将在另一个视频中讨论这个问题。
So for right now, we can just change our font and do explicit sizing if we want.
所以现在，如果我们愿意，我们可以改变字体并进行显式调整。
Before right now, I just wanted to show you guys this method so that we can get an exact size if we want.
在此之前，我只是想向你们展示这种方法，这样如果我们愿意，我们就可以得到一个确切的尺寸。
So this is great if you had a design team that was using specific font sizes. And they want you to replicate that in your app.
所以如果你有一个使用特定字体大小的设计团队，这就太好了。他们希望你在你的应用程序中复制它。
You can just do that here. The downside of using this method is that this number will not automatically resize.
你可以在这里这样做。使用这种方法的缺点是这个数字不会自动调整大小。
So on an iPhone, users can change their font size to like bigger if you've probably seen like your grandparents or your parents need the bigger font on their phone.
所以在iPhone，如果你可能见过你的祖父母或父母需要手机上更大的字体，用户可以把他们的字体改大。
Well, if this was in your code, this font would stay 24. But if you had used the font with one of these preset like the body or the title,
如果这是在你的代码中，这个字体将保持24。但是如果你使用字体和这些预设之一，比如正文或标题，
these fonts will automatically update size based on these system settings. So I definitely recommend using these ways directly.
这些字体会根据这些系统设置自动更新大小。所以我绝对建议直接使用这些方式。
But of course, sometimes you're going to want to use specific font sizes for certain things.
但是当然，有时你会想对某些事情使用特定的字体大小。
So that's that modifier. And now let's move on to some formatting things. So I'm going to comment this out as well.
这就是修饰符。现在让我们继续一些格式化的事情。所以我也要把这个评论出来。
The next modifier I want to look at is the dot multi line text alignment. And this by default, if we didn't include it, would be dot center.
我想看的下一个修饰符是点多行文本对齐。默认情况下，如果我们不包含它，它将是点中心。
And this is basically if you have multiple lines in your text, how you want them to align.
这基本上是如果你的文本中有多行，你希望它们如何对齐。
Now to view this, we need multiple lines of text. Obviously, it's called multi line. So let's add some more text to our component here.
现在要查看这个，我们需要多行文本。显然，它被称为多行。所以让我们在这里为我们的组件添加更多的文本。
So hello world. This is the swivel thinking bootcamp. I am really enjoying this course and learning a lot.
所以你好世界。这是旋转思维训练营。我真的很喜欢这门课程，学到了很多东西。
So you can see here that by default, the text is center align. So this last line here is in the center.
所以你可以在这里看到，默认情况下，文本是居中对齐的。所以最后一行在中间。
But we could use this multi line text alignment to align it to the left side here. So you can call dot leading.
但是我们可以使用这种多行文本对齐来将其对齐到左侧。所以你可以称之为点领先。
And now it aligns nicely. We could also do dot trailing if you need to. I never really use this, but it's super easy and super useful modifier.
现在它对齐得很好。如果需要，我们也可以做点拖尾。我从来没有真正使用过这个，但它是超级简单和超级有用的修饰符。
Let's put this back as leading. And next we're going to use a new modifier. So I'm going to actually add this one before the multi line text alignment.
让我们把这个放回领先。接下来我们将使用一个新的修饰符。所以我要在多行文本对齐之前添加这个。
Now in Swift UI, we haven't really discussed this yet, but the order that you add these modifiers in does matter.
现在在Swift UI中，我们还没有真正讨论过这个问题，但是添加这些修饰符的顺序确实很重要。
And we need to use this next modifier before we call multi line text alignment. So I'm going to press enter and create a line before this.
在我们调用多行文本对齐之前，我们需要使用下一个修饰符。所以我要按回车键，在这之前创建一行。
And let's add a modifier dot baseline offset. And this you'll see is just basically the line spacing between each of these.
让我们添加一个修饰符点基线偏移。你会看到这基本上是它们之间的行距。
So in like Microsoft Word, if you did line spacing of 2.0, that looks a lot like a baseline offset of 10.
所以像微软的Word一样，如果你的行距是2.0，那看起来很像10的基线偏移。
We can change this around. We can do 50 and now they're really well spaced out. And we can also make it negative 50 if we want it kind of inverse so that the spacing is above each line instead of below.
我们可以改变一下。我们可以做50，现在它们间隔得很好。如果我们想要相反的，我们也可以把它变成负50，这样行间距就在每条线的上方，而不是下方。
I don't use this too often in code, but I wanted to show you guys that it's there and it's possible.
我在代码中不经常使用它，但我想向你们展示它就在那里并且是可能的。
Let's comment it out. And we can also add a modifier called dot kerning. Now this is the spacing between each letter.
让我们把它注释出来。我们还可以添加一个修饰符，叫做点字距调整。现在这是每个字母之间的行间距。
So right now 1.0 is adding about one pixel space between each of these letters.
现在1.0在每个字母之间添加了大约一个像素空间。
The changes to 10, you'll see that the words really start spacing out.
改为10，你会看到单词真的开始行间距了。
Again, this is not used very often, but you can make some really cool fonts and text just like this.
同样，这并不经常使用，但是你可以像这样制作一些非常酷的字体和文本。
Let's comment that out. And one more font modifier you're definitely waiting for me to add is the dot foreground color.
让我们把它注释出来。还有一个字体修改器你肯定在等我添加，那就是点前景色。
And this is just the font color so we can do dot blue dot red.
这只是字体颜色，所以我们可以做点蓝色点红色。
And it changes the font, which is awesome.
它还能改变字体，太棒了。
Now real briefly, before we finish up, I want to talk a little bit about the frame of the text.
现在，非常简短，在我们结束之前，我想谈谈文本的框架。
We have not set a frame here and this text is just resizing how it needs to resize the fit all the text within the box.
我们没有在这里设置框架，此文本只是调整大小，以适应框内的所有文本。
But this box right here, this blue outline, we can actually set a specific size for it if we want.
但是这个蓝色的轮廓，如果我们愿意，我们可以为它设置一个特定的尺寸。
So for example, I can call dot frame. I'm going to do a video on frames later, but let's just say for example, we use this with height and alignment.
例如，我可以调用点帧。稍后我将做一个关于帧的视频，但是让我们举个例子，我们用这个来表示高度和对齐方式。
And maybe we needed our text to be like only a half of the screen.
也许我们需要我们的文字只有半个屏幕。
Well, we can change the width to let's do 200, the height to 100 and we'll keep the alignment as center.
嗯，我们可以把宽度改为200，高度改为100，我们将保持对齐为中心。
Then you can see our box is smaller here and our text is getting cut off.
然后你可以看到我们的盒子在这里变小了，我们的文字被切断了。
Now, there's going to be times in your app where you need the text to be within a certain area.
现在，在您的应用程序中，有时您需要文本在特定区域内。
And one of the really cool modifiers we can add on text is the minimum scale factor.
我们可以在文本上添加的一个非常酷的修饰符是最小比例因子。
So I can call dot minimum scale factor and this is basically a percent of the font size.
所以我可以称之为点最小比例因子，这基本上是字体大小的百分比。
So if we did 0.1, we're allowing our font to scale down to about 10% of the actual font size so that it can try to fit within this box.
所以如果我们做0.1，我们允许我们的字体缩小到实际字体大小的10%左右，这样它就可以试着适应这个盒子。
You can see that our font automatically adjusted and resized to fit within this box, which is really awesome.
你可以看到我们的字体自动调整和调整大小以适应这个盒子，这真的很棒。
Now, the most common question I see is how do we align the text to the leading edge if we don't have multiple lines.
现在，我看到的最常见的问题是，如果我们没有多行，我们如何将文本对齐到前缘。
So right now it's multiple lines and it's aligning nicely to the leading edge of the text.
所以现在它有多行，并且很好地与文本的前沿对齐。
But if we only had one line here of code, hello world, you can see that it's still aligning to the center because there's not multiple lines to align against.
但是如果我们这里只有一行代码，你好，世界，你可以看到它仍然与中心对齐，因为没有多行可以对齐。
And it's not going to the edges of our frame.
它不会到我们画面的边缘。
And what we can do in this scenario is just change the alignment on the frame to leading.
在这种情况下，我们可以做的只是将框架上的对齐更改为引导。
And so we can do dot leading and now our text is pushed all the way to the left side.
所以我们可以做点引导，现在我们的文本被一直推到左边。
Lastly, before we wrap up, I just want to point out that the text accepts a string and in Swift, if you want to add actual text to your app that is not part of the code,
最后，在我们结束之前，我只想指出文本接受一个字符串，并且在Swift中，如果您想将不属于代码的实际文本添加到您的应用程序中，
you basically just put it within two quotes.
你基本上只是把它放在两个引号内。
So we have the quote opening quote, the closing quote, and we have hello world.
所以我们有开场白，结束语，我们有你好世界。
And we can call modifiers on it directly like dot lowercase, which will keep make all the text lowercase, regardless of how you typed it in here.
我们可以直接在上面调用修饰符，比如点小写，这将保持所有文本小写，不管你是怎么在这里输入的。
Could also do uppercase.
也可以大写。
And of course, we can do capitalized.
当然，我们可以大写。
Capitalized is really useful.
大写真的很有用。
It capitalizes every word, which is what we already have here, but it's really useful if you need like cities and states and names.
它把每个单词大写，这是我们已经有的，但是如果你需要城市、州和名字，它真的很有用。
You can use capitalized.
您可以使用大写。
So that's it for this video.
这就是今天的视频。
This was a pretty easy straight forward one.
这是一个非常简单直接的问题。
I hope you guys enjoyed it.
我希望你们喜欢。
Again, I'm Nick.
再说一遍，我是尼克。
This is Swift for thinking.
这是用于思考的Swift。
And I will see you guys in the next video.
我们下次视频再见。
you
你