SwiftUI & Combine

[FrizzleFur]

主要通过项目学习SwiftUI
SwiftUI的原理&思想
Combine框架的使用

[FrizzleFur]

SwfitUI 笔记

Introducing SwiftUI: Building Your First App
SwiftUI Essentials

• A view in swiftUI is a struct that conforms to the view protocol.

Modifier

由于view在swiftUI中是一个值属性，SwiftUI对view的修饰是对原来view进行包裹，在下次渲染时，按包裹后的结构进行渲染，生成一个新view值

[image:387D7038-DCE5-4544-B867-A6C27CECEE2A-1589-0000314C098631A2/269B2BB3-367D-44B1-A88D-610E58EF3C65.png]
[image:AD3D01A5-68CF-414A-A7C9-EFE4C765058F-1589-00003151AEE68AE3/144045C3-593D-4311-BFE2-67E24F3A8448.png]

Modifier chaining

[image:D3764D19-2143-438B-9644-19015590F82E-1589-0000358BC936D147/C0947286-DEA8-4858-A9FD-2EEB5E1D3DC9.png]

• 属性从UIKit的每个实例的存储，改为每个view自身所需的属性，无须在每次创建view时带一堆默认用不到的属性，这样SwiftUI变得更轻更快了

[image:97BBBB01-60D3-483E-A935-327E1F8BB3D2-1589-000035EAFAC9E27C/29CDA56A-8662-495E-A4A1-92B454E460AA.png]

[image:518A9BE8-B85B-450D-A0B8-38A272EDD549-1589-00003608D0ED1B01/71492B55-550D-41EA-AE03-BAB15A68CE57.png]

声明式UI， diff —> rerender

[image:23831FCB-8667-42EB-BD22-C19DF4A81F05-1589-0000373C184079CB/9A2BE1F0-4067-4B5E-9E35-EDF76C429DFA.png]

@State、 @binding 、@Environment

Jared Sinclair | When Should I Use @State, @Binding, @ObservedObject, @EnvironmentObject, or @Environment?
(8) SwiftUI Tutorial: What’s the difference between @State, @ObjectBinding, and @EnvironmentObject? - YouTube
iOS - SwiftUI @State vs Binding - Stack Overflow

State

Think of State as the single source of truth for your view, as a means of mutating a variable & invalidating the view to reflect that state.
[image:8CB6D1D4-D785-4279-859B-109B787F4EB1-1754-0000061EB5E92575/730FA3A9-1AE0-47E4-95A7-08A506E35F45.png]

Binding

Binding is a property wrapper type that can read and write a value owned by a source of truth.

• Reads the value: Text(username)
• Reads and writes the value: ::Text($username)::
  Binding on the other hand, is a two-way connection between a view and its underlying model . A means of mutating a State that is not managed by the view (for example a Toggle that reflects and controls a bool value that the control itself has no knowledge about its storage or origin)
  Finally, you can get a Binding from any State by using the $ prefix operator.

Conclusion

A simple guide for choosing between them would be:
Do I need to modify a value that is private to me? => State
Do I need to modify a State of some other view? => Binding

1. Use @State when your view needs to mutate one of its own properties.

2. Use @binding when your view needs to mutate a property owned by an ancestor view, or owned by an observable object that an ancestor has a reference to.

3. Use @ObservedObject when your view is dependent on an observable object that it can create itself, or that can be passed into that view’s initializer.

4. Use @EnvironmentObject when it would be too cumbersome to pass an observable object through all the initializers of all your view’s ancestors.

5. Use @Environment when your view is dependent on a type that cannot conform to ObservableObject.

6. Also use @Environment when your views are dependent upon more than one instance of the same type, as long as that type does not need to be used as an observable object.

7. If your view needs more than one instance of the same observable object class, you are out of luck. You cannot use @EnvironmentObject nor @Environment to resolve this issue. (There is a hacky workaround, though, at the bottom of this post).

Layout

[image:4B916742-61E1-4CCD-A9B3-884A0C77CEEC-1695-0000225AA9473073/blog-2.png]

Alignment

• SwiftUI Stack Alignment and Alignment Guides – Answertopia
• Alignment Guides in SwiftUI - The SwiftUI Lab

混乱从哪里开始

我认为首先要解决的事实是，您可以.leading在太多地方指定类似的内容。但是，在每种情况下，它具有完全不同的含义：
[image:99CEB82F-61D5-4C2C-A38B-7A2AA2186757-3787-0000055C1D8599A0/alignment-confusion.png]
您不应为此感到吃惊。我们将深入研究这些参数中的每一个，它们很快就会对您有意义。我将在此处提供基本描述，但下面将进一步详细说明。
**容器对齐：**它有两个目的。它指示哪些alignmentGuides（）将被忽略，哪些不是。但是，它还为所有包含的没有明确指南的视图定义了隐式对齐指南。
对齐指南：除非此值与“ **容器对齐”**参数匹配，否则在布局过程中将忽略此指南。
隐式对齐值：这是一个数字值，指示其所修改视图的参考线的位置。有一些方便的预设值，例如d.width，d [.leading]，d [.center]等，但最终我们返回的是数字值。这是与给定指南关联的默认（隐式）值。
明确比对值：这是一个数字值，指示其修改的视图的辅助线的位置。这是一个明确的值（即，您通过编程方式定义的值）。
框架对齐：指示容器中所有包含的视图如何对齐（作为唯一组）。
文本对齐：对于多行文本视图，它指定文本行在文本视图内如何对齐。

Other

In most tutorials I have seen, background is used in its simplest form. For example: Text(“hello”).background(Color.red). At first glance we may fail to realise that, Color.red, is not just a parameter indicating that the color should be red. No, Color.red is yet another view! Its only function is to fill the area suggested by its parent with the red color. Because its parent is background, and background modifies Text, the area suggested to Color.red is the area occupied by the view Text(“hello”). Beautiful, isn’t it?

The .overlay modifier does exactly the same, but instead of drawing its contents behind the modified view, it draws them in front of it.