用字体和颜色打磨设计-哥来自火星

[本文翻译自hackingwithswift，点击链接阅读原文]

我们稍后会为我们的设计添加一些，但首先让我们暂停一下，让我们拥有的东西看起来更好。

在ItemRow.swift中，我们的菜单项名称显然是每行中最重要的东西，但它的字体大小与以下价格相同。我们可以使用font()修饰符来调整它的大小和重量，它接受苹果的任何动态字体大小。

所以，像这样的东西会让它脱颖而出：

Text(item.name)
    .font(.headline)

至于照片，它看起来还不错，但有一点爱，它看起来会更好。例如，我们可以应用clipShape()修饰符，并要求将其剪切到圆形：

Image(item.thumbnailImage)
    .clipShape(Circle())

或者我们可以应用clipShape()修饰符，然后添加一个overlay()修饰符，以便我们在图像的顶部放置一个形状。例如，这将在图像上添加一个圆圈，然后给该圆圈一个2点灰色边框：

Image(item.thumbnailImage)
    .clipShape(Circle())
    .overlay(Circle().stroke(.gray, lineWidth: 2))

好吧，造型就够了——让我们来看看更复杂的东西。

如果你查看menu.json，你会看到每个菜单项都有一系列限制：“G”表示含有麸质，“N”表示含有坚果，“V”表示素食友好，等等。我们可以用它来创建彩色图标，一目了然地代表食物中的内容，在每行中酌情显示零或更多。

首先，我们需要一个颜色词典，我们将用于每种限制类型。将此属性添加到ItemRow：

let colors: [String: Color] = ["D": .purple, "G": .black, "N": .red, "S": .blue, "V": .green]

其次，我们需要循环所有限制，并将每个限制都放入文本视图中。把这个放在包含名称和成本的VStack之后：

ForEach(item.restrictions) { restriction in
    Text(restriction)
}

现在我们有一个问题：那个代码无法编译。正如我之前提到的，只要SwiftUI知道如何唯一地识别数组中的每个项目，我们就可以将数组放入aForEachForEach。我们通过使我们的部分和项目符合Identifiable协议来解决这个问题，该协议使用id属性来识别项目。

然而，在这里，我们有一个字符串数组，所以我们不能使它们符合Identifiable。相反，我们需要别的东西：我们需要告诉Swift，字符串本身是每个项目的标识符。这可以使用ForEach的id参数来完成，传递\.self作为其唯一的参数，如下所以：

ForEach(item.restrictions, id: \.self) { restriction in
    Text(restriction)
}

现在，您应该在Xcode预览中看到我们的示例项目旁边的文字“G”和“V”。

不过，这很无聊，所以让我们用一些修饰词来调味：

Text(restriction)
    .font(.caption)
    .fontWeight(.black)
    .padding(5)
    .background(colors[restriction, default: .black])
    .clipShape(Circle())
    .foregroundStyle(.white)

这将使用带有白色文本和彩色背景的小粗体字体，添加一个圆形剪切形状，并在它周围添加一点空间，这样文本圆圈就不会那么近了。

SwiftUI列表行，显示食物照片、其名称和价格，以及显示其食品限制的圆圈。

在完成这个项目行的设计之前，我们还要做一件事：我们将强制限制文本与行的其余部分分开。SwiftUI有一个名为Spacer的专用视图，我想让你把它放在ForEach之前，以限制我们的限制，像这样：

Spacer()

ForEach(item.restrictions, id: \.self) {

这将自动占用所有可用的可用空间，这意味着我们的图片现在将位于最左侧，限制位于最右侧。

现在继续运行这个项目，我想你会同意它看起来很棒！现在想想你如何使用UITableViewCell完成这一切——这需要比你预期的更多的代码！

目录CONTENT

用字体和颜色打磨设计

评论区