切换窗口导致花屏_切换到SwiftUI导致我进行了重新设计-CSDN博客

切换窗口导致花屏

I had been putting off adding a new feature to Decisive Wife which would let users see what they had eaten in the past. This would be especially useful to me as I am constantly looking at leftovers in the fridge and thinking how old they are (my wife is a pastry chef and won’t let me eat anything older than a week). I had originally started the work in UIKit back in the beginning of the year, but got side tracked with making a Today widget, and a couple other smaller updates. When I tried to merge the changes, I found out I’m not so great with Git. Suffice it to say, I’m abandoning that branch.

我一直在推迟向“ 决定性妻子”添加新功能，该功能使用户可以查看他们过去吃过的东西。这对我特别有用，因为我一直在看冰箱里的剩菜，想着它们的年龄(我的妻子是一名糕点厨师，不会让我吃一个星期以上的东西)。我最初是从年初开始在UIKit中进行工作的，但是在制作Today小部件以及其他一些较小的更新方面却受到了跟踪。当我尝试合并更改时，我发现我对Git不太满意。可以说，我放弃了那个分支。

A little backstory before I move on. I had started working on Decisive Wife with an old 2010 17” Macbook Pro back in May of 2019. It was able to run XCode, slowly, and was able to build for iOS 12.1. Once WWDC2019 happened and SwiftUI was introduced, I did not believe my dated MBP would be able to handle it. I also decided to keep my build target set at 12.1 since I was hearing iOS 13 had many bugs and figured fewer people would be updating to it. After WWDC2020, it sounded like SwiftUI had become more mature so I decided to rewrite my most complicated page in it, the Meal Plan view.

我继续前进之前的一些背景故事。我从2019年5月开始使用旧的2010年17英寸Macbook Pro来制作《果断妻子》。它能够缓慢地运行XCode，并且能够为iOS 12.1进行构建。一旦发生WWDC2019并引入了SwiftUI，我不相信我过时的MBP能够处理它。我还决定将构建目标设置为12.1，因为我听说iOS 13存在许多错误，并且认为将对其进行更新的人员更少。在WWDC2020之后，听起来好像SwiftUI变得更加成熟，所以我决定重写其中最复杂的页面，即Meal Plan视图。

膳食计划视图重新设计 (The Meal Plan View Redesign)

For the Meal Plan view I wanted the user to be able to see all 7 days of a week without having to scroll. This would limit the vertical space available to me, especially on the smaller phones like the iPhone SE. Creating the constraint of only having two lines of information per meal plan. I of course had to have one of those lines be the name of the chosen meal. The next line I wanted to show the labels assigned to the meal as a quick and colorful way of identifying the types of meals throughout the week. This also added a horizontal constraint to the amount of labels I could include in the row. This especially became smaller when the image and prep/cook times were present. I also wasn’t very creative when it came to displaying the cook and preparation times with only using ‘p’ and ‘c’ to label them.

对于“用餐计划”视图，我希望用户能够查看一周的所有7天而无需滚动。这将限制我可用的垂直空间，尤其是在像iPhone SE这样的小型手机上。限制每个用餐计划只有两行信息。我当然必须选择其中一行作为所选餐点的名称。我想在下一行显示分配给餐食的标签，以快速，多彩的方式确定整个星期的餐食类型。这也为我可以在行中包含的标签数量增加了水平约束。当存在图像和准备/烹饪时间时，这尤其变小。在显示烹饪和准备时间时，我也没有很大的创意，仅使用“ p”和“ c”来标记它们。

Image for post — Side by side screen shots of the meal plan view.

I really like how SwiftUI laid everything out for me without having to code in as many constraints as I had previously. I thought having the meal name in the center of the row was the right choice, but now that I see it being aligned to the top I know I was wrong.

我真的很喜欢SwiftUI如何为我安排一切，而不必像以前一样编写许多约束。我以为将餐名放在行的中间是正确的选择，但是现在我看到它与顶部对齐，我知道我错了。

What I was really like are the areas for the labels look better with more horizontal space. The font size didn’t change at all and I can fit less in the row, but I am perfectly happy with the result.

我真正想要的是标签区域在具有更多水平空间的情况下看起来更好。字体大小完全没有变化，我可以容纳更少的行，但是我对结果感到非常满意。

Another nice new feature I got by supporting a newer operating system, are the Color Sets I can define. Before I had used the stock colors provided by the operating system. Well this time I was able to define my own muted colors, as can be seen above, so they are not as bright in contrast to the rest of the design. The sliders are also very helpful in seeing how moving them will effect the color overall. Which given my lack of color knowledge is a huge plus in my book.

通过支持较新的操作系统，我获得的另一个不错的新功能是可以定义的颜色集。在我使用操作系统提供的原色之前。好了，这次我能够定义自己的柔和颜色，如上所示，因此与其余设计相比，它们不那么明亮。滑块对于查看移动它们如何影响整体颜色也非常有帮助。鉴于我缺乏色彩知识，这对我的书来说是一个巨大的优势。

询问Sheri重新设计 (Ask Sheri Redesign)

The Ask Sheri feature was what really got a complete overhaul. This feature is intended to allow users to quickly get a randomized meal decision from all their dinner ideas or from the selected labels. Originally the decision would be presented to the user as a notification with three options of “OK!”, “Details”, or “Ask Again ” to choose from. If the user had no Labels the notification would present itself right away. If the user has Labels, a half screen would appear allowing them to select if the choose should be made from the subset of dinner ideas. This would again present the notification. There are many reasons why using a notification was the wrong thing to do especially when asking again would dismiss the notification and cause it to reappear making the screen flash.

Ask Sheri功能才是真正的全面革新。此功能旨在允许用户从所有晚餐创意或所选标签中快速获得随机用餐决定。最初，该决定将以通知的形式呈现给用户，其中包含“确定！”，“详细信息”或“再次询问”三个选项供您选择。如果用户没有标签，则通知将立即显示。如果用户有标签，则会出现一个半屏，允许他们选择是否应从晚餐创意的子集中进行选择。这将再次显示通知。使用通知是做错事情的原因有很多，尤其是当再次询问将取消通知并使其重新出现时，会使屏幕闪烁。

Moving to SwiftUI I had to give up on using the notification since it no longer allows for more than two buttons natively. What I came up with I am much more proud of.

转到SwiftUI以来，我不得不放弃使用通知，因为它不再允许在本地使用两个以上的按钮。我想出的一切让我感到自豪。

The entire feature was moved to its own sheet where a selection is immediately given, even if the user has added labels. Touching the “Ask Again” button no longer flashes the screen to bring up a new notification and instead just updates the text.

整个功能被移动到其自己的工作表中，即使用户已添加标签，也会立即给出选择。触摸“再次询问”按钮不再闪烁屏幕以显示新的通知，而是仅更新文本。

添加过去用餐功能 (Adding the Past Meals Feature)

The new feature I mentioned at the beginning has also underwent a change since its inception. When I first thought up of how I wanted users to switch to the past weeks I figured I would just replace the buttons in the action bar with the weeks a user could load. With SwiftUI this could easily be done by replacing the array the list pulls from with that of a past week. Hence why I wanted to switch to SwiftUI. I got this working quickly after I finished rebuilding the view in SwiftUI.

自开始以来，我在开头提到的新功能也进行了更改。当我第一次想到如何让用户切换到过去的几周时，我想到我只是将操作栏中的按钮替换为用户可以加载的几周。使用SwiftUI，可以很容易地通过将列表中的数组替换为过去一周的数组来完成。因此，为什么我要切换到SwiftUI。在SwiftUI中重建视图后，我很快就开始工作了。

Then I started having ideas of how I could further the user experience by using a snap carousel to display the past weeks and have the user swipe between them. I’ve always liked the way a card style UI looks and have been wanting to implement one for Decisive Wife. This seemed like the perfect opportunity to do so. I was able to follow this tutorial to get it working like a charm. This also allows me to avoid having to deal with the logic surrounding determining if the view is in edit mode vs past meals mode for the rows. I’m happy with the result and can’t wait to release it once iOS is available.

然后，我开始想到如何通过使用快速旋转木马来显示过去的几周并让用户在两周之间滑动来提高用户体验。我一直很喜欢卡片式用户界面的外观，并且一直希望为“决定性妻子”实现一个界面。这似乎是一个绝佳的机会。我能够按照本教程进行操作，使其魅力十足。这也使我不必处理围绕确定行是否处于编辑模式还是过去用餐模式的逻辑。我对结果感到满意，迫不及待想在iOS可用时发布它。

事后思考 (Afterthoughts)

I know I’m not the greatest at designing good looking user interfaces, but SwiftUI has helped me at least enhance the look of what I do design. The grocery list is the next view I want to tackle with a rewrite in SwiftUI with a redesign and I plan on doing more. Being able to quickly make the rows for lists will also be helpful in displaying more information in the dinner ideas tab. For now I’ll have to take it one view at a time.

我知道在设计美观的用户界面方面我并不是最擅长的，但是SwiftUI至少帮助我增强了我所设计的外观。杂货清单是我想通过重新设计在SwiftUI中进行重写的下一个视图，并且我计划做更多。能够快速为列表创建行也将有助于在晚餐创意标签中显示更多信息。现在，我必须一次查看一个视图。

Icons were taken from Icons8.

图标取自Icons8 。