ios小部件_编写iOS的第一个小部件

ios小部件

If you’ve been following WWDC20, then you totally understand how huge this edition of WWDC has been for the whole Apple ecosystem, users, and developers. With the announcement of iOS 14, many handy features are on their way to spice up the iOS experience. One of such features is Widgets.

如果您一直在关注WWDC20 ，那么您将完全了解此版本的WWDC对整个Apple生态系统，用户和开发人员的影响。 随着iOS 14的发布，许多便捷的功能正在为增加iOS体验增色不少。 这些功能之一就是Widgets 。

I know this doesn’t sound new for Android users, but this definitely is great news for iOS users. Now, developers can create widgets of their applications by making use of the new WidgetKit framework. As of now, it is in Beta and available in Xcode 12 Beta and above.

我知道这对于Android用户而言并不陌生，但这对于iOS用户而言绝对是个好消息。 现在，开发人员可以通过使用新的WidgetKit框架来创建其应用程序的小部件。 截至目前，它处于Beta版，并且在Xcode 12 Beta及更高版本中可用。

Note: You will need Xcode 12 Beta or above to be able to create Widgets.

注意：您将需要Xcode 12 Beta或更高版本才能创建小部件。

Now, let’s start writing our very first widget for iOS. For that, let’s create a new SwiftUI project. I’m naming it CountrySelector. This application will display the flags of some countries and when the user taps on any flag, the details of that particular country will be displayed in the widget of the application.

现在，让我们开始编写我们的第一个iOS小部件。 为此，让我们创建一个新的SwiftUI项目。 我将其命名为CountrySelector 。 此应用程序将显示某些国家/地区的标志，并且当用户点击任何标志时，该特定国家/地区的详细信息将显示在应用程序的小部件中。

Sneak peek of how the widgets will look like. In the screenshot, the medium sized and large sized widgets are shown.

偷窥小部件的外观。 在屏幕截图中，显示了中型和大型窗口小部件。

Creating a new SwiftUI project

创建一个新的SwiftUI项目

After creating your project, the project structure will look something like this:

创建项目后，项目结构将如下所示：

Project structure

项目结构

First, let’s create a model, Country. It will be a struct that will hold a country’s details like name, flag and continent. Let’s make it conform to Codable and Identifiable protocols since we want to perform encode-decode operations and later perform an iteration using ForEach respectively. Since we made our model conform to Identifiable, we will be asked to add an id property, which is a computed property returning the value of name, in the model. Hence, after adding everything, the final code will look like this:

首先，让我们创建一个模型Country 。 该struct将保留一个国家的详细信息，例如name ， flag和continent 。 让我们使其符合Codable和Identifiable协议，因为我们要执行编码解码操作，然后分别使用ForEach执行迭代。 由于我们使模型符合Identifiable ，因此将要求我们在模型中添加一个id属性，该属性是返回name值的计算属性。 因此，添加完所有内容后，最终代码将如下所示：

After that, let’s go to ContentView.swift file and add some dummy country data there. So, above the body property of ContentView, create an array, countries and write the following:

之后，我们转到ContentView.swift文件，并在其中添加一些虚拟国家/地区数据。 因此，在ContentView的body属性上方，创建一个数组， countries并编写以下内容：

let countries = [Country(name: "Nepal", flag: "🇳🇵", continent: "Asia"),
Country(name: "USA", flag: "🇺🇸", continent: "North America"),
Country(name: "United Kingdom", flag: "🇬🇧", continent: "Europe"),
Country(name: "France", flag: "🇫🇷", continent: "Europe"),
Country(name: "China", flag: "🇨🇳", continent: "Asia"),
Country(name: "India", flag: "🇮🇳", continent: "Asia"),
Country(name: "Australia", flag: "🇦🇺", continent: "Australia")]

Now, our dummy data are ready. It’s time to show the dummy data in our view. For that, let’s create a new view, CountryView. We will use this view to display the country flags.

现在，我们的虚拟数据已准备就绪。 现在该在我们的视图中显示虚拟数据了。 为此，让我们创建一个新视图CountryView 。 我们将使用此视图显示国家/地区标志。

In CountryView.swift, we can get rid of CountryVi