SwiftUI 视觉化演示 总贴

大家好，从 WWDC 2019 咱们知道了 Apple 关于 SwiftUI 的重视以及整合其生态链 ⌚️ 的决心。关于咱们开发者 ‍ 而言，SwiftUI 的直观，高效和便捷以及可润饰性的 Coding 更是值得咱们高兴 ，J H N N a ?国内包含一些像 BATJ 的大厂也在活跃布局 。

可是，Xcode中关于SwiftUI的 Library 文件 仍然非常抽象且苍白，要6 0 ? C记住一切的润饰作用关于开发者们是一件非常苦楚的事情2 E @ 7 x m F % B。

我决议将其一切R H 9 _ & d @ /的润饰作用进一步视觉化，实例化 。还包含其使用的扩展方法 以及注意事项 ❗️（HIG）。_ q R `

可能关于一些 Pro 选手 来说K @ * 7 # W !这个 Repo 适当根底，可是关于原生控件的娴熟掌控一定能让你事半功倍，而且更多的视觉化作用也许还能助你激起9 L W h } +新的创意 。

当然关于初阶开发者 来说就更重要了，我曾测验过好g T w w几门 tutorial，可是学完之后只是就会开发 tutorial-alike 的 app，nothing more！。我供认我现在仍是be! 3 r ?ginner，可是我觉得这是走向进阶 的必经之路 。

Hi, guys! We all know that SwiftUI is gettiE l hng more and more powerful , and one of its big features is Modifier. How# | & # t cever, in Xcode, the librH 2 iary d* F y * Documents are pretty plain, and sometimes confu? , Y 1 = Usingd h N B 0 for an inexperienced deveV N f 1 ; u 3 z Sloper like m$ ? q + xe .

So I decide to put my best effort to visualize these and share with youk 2 8 p g p E ) guys., ; b p – i a I know it’s going to be elementary for some pros ‍.7 w N But every cool stuff is built from these, and you may find some inspirations from this grap/ Q H & Z 8 6hic library.

Feel5 { 5 ) freF C Z p ge to make some contribution@ . H h *s and polishes. you Gitters .

Requirements

• macOS 15+
• Xcode 11.0+
• iOS 13.0+

Tools

• I use Gifox (app) to record ⏺ GIFs

‍ Change View in Xcodeu P v j k j

for detail

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Controls

Action Sheet

An action sheet is a specific style of alert that appears in response to a contP k *rol or actb f , @ 9 }ion, and presents a set of twZ { [ I [o or more choice@ c 0s (recommend up to 3️⃣) related to the current cont6 ? J * J – = 7 text.

Work like this:

for more details, go to modifier_ActionSheet.md

---

Alert

Alertsr ] 6 A 2 9 convey important information related to the state of yourT U S app or the device, and often& = , 7 o I request feedback. An alert consists of a title, an optional message, one orR r e more buttons, and oE U * ` Jptional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

Work like this:

for more details, go to modifier_Alert.md

---

Context Menu (1/4)

A container for views B K ! 6 D l & that you present as a menu items in a contextual menu in response to thW ; M T I Ce standard system gesture (long press).

Work like this:

for more details, go to modifier_ContextMenu.md ( need HELP here)

---

• Control S, & 8 kizeT P / S 1 3 #
• Focusable
• Item Provider

Popover (2/4)

A pop. F dover is a transient view that appears above o* ^ j Jther content onscreen when you tap a control or in an area.

Work liv * / l % $ Hke this:

for more details, go to modifier_Popover

---

Sheet (2/3)

A sheet is a fullscreen I j | ^ I m a “popover“ which appears from bo c Z C 9 + } Lottom with beautiful native transition.

Work like this:

for more details, go to modifier_Sheet$ z ( Q } }

---

• Status Bar Hidden
• Tab Item
• Touch Bar
• Touch Bar Customizati] _ hon L= , !abel
• Toj ; m X M Tuch Bar Item Presence
• Touch Bar Item Principal

Effect

Accent Color

Accent Color is the theme color of your apps, it can be applied on Button & Tab2 Q w M h = JItem .

The default accent color is Color(.systemBlue)

Work like this:

fC f P cor more details, go to modifier_AccentColor.md

---

Blend Mode

SH P J V F * ]ets the blend mode for compositing the view with overlapping views.

Work like this:

for more details, go to modifier_BlendMode.md

---

Blur

.j H F H x ` ublur()Applies a Gaussian bl[ 5 k 7 e Cur to the view.

If you want to apply i: B G 0 0 4 ] _ t to backgrounde, you have to ag % P d $ – n ; Vdd few more codeV P – K. See struct BlurBg

Work like tr n xhis:

for more details, go to modifier_Blur.md

---

Border &amc 9 Yp; Stroke & StrokeBorder

.border() is always a rectanL Q @ = H 9gle, and draws bork * v { pder inside5 V C ) t u 5 its frame.

.stroF h eke() can be shaped, and draws border right in its frame.

.strokeBorder() can be shap. 0 L c n { Med, and draws border inside its frU m I ] B / F ~ame.

Work like this:

for more details, go to modi{ Bfier_Border.md

---

Brightness

.brightness() applies to the view. and its suggested range is from -1 to 1 (Double)

Work like this:

for more details, go to modifier_Brightness.md

---

Clip Shape

.clipShape() applie$ * I ` N ss to the shape.

.cV $ x 3 z e O D Slipped() applies to the frame.

Work like this:

for more details, go to modifier_ClipShape.md

---

Clipped

see modifiec w !r_ClipShape.md

---

Invert

Inverts the colors in the view.

Work like this:

for more details, go to modifier_; o GColorInvert.md

---

Color Multiply

Adds a color multiplication effecti s d g to the view.

Work like. + g B Y = l # * this:

for more details, go to modifier_ColorMultiply.md

---

Color Scheme

Sets the view’s color( E q d scheme. (Dark mode preview)

Work like this:

for more detr | w 9 O % ! Sails, go to modifier_ColorScheme.md

---

• Compositing Group

• Content Shape

Contrast

.c[ p J y zontrast(g Y e b : Z . E) applies to the view. and its suggested range is from -5 to 5 (Double)

Work like this:

for more details, go to modifier_Contrast.md

---

Corner Radius

.cornerRadiug ` G E x b c . ys() applies to the view.

and whe} % n =n its amount is clo` H i v 6 # m Iserp 6 I z B = 9 r to its frame, it would be .clipShape(Circle())

WoT O 5 (rk like this:

for more details, go to modifier_Co1 K y [ V ; h – MrnerRadig n X |us.md

---

• Drawing Group

• Foreground Color

• Grayscale

• Hue Rotation

• Luminance to Alpha

• Mask

• Opacity

• Preferred Color Scheme

• Projection

• Rotation 3D

• Rotation

• SaturatiK F ) X G K z } qon

• Scale

• Shadow

• Transform

Layout

• Alignment Guide

• Anchor Preference

• Aspect Ratio

• Background

• BackgrouJ H j xnd preference Value

• Coordinate Space

• DefQ [ ` [ Mault Wheel Picker Ite? s * { N D v l /m Height

• Edge IgnorinK * c L ~ Mg Safe Area

• Fixed Size

• Frame

• Hidden

• Horizontal Ratio Group Layout

• Label Hidden

• Layr a c [ f aout Priority

• Overlay

• Overlay Preference Value

• Padding

• Position

• Scaled to Fillz $ ^ W [ =

• Scaled toS D z 0 ? Fit

• Transform Anch w or PreferF R F Hence

• Z index

Text

• Allows Tightening

• Autocapitalization

• Baseline Offset( 9 #

• Bold

• Disable Autocorrection

• Flips for Right to Left

• Font

• Font Weight

• Italic

• Kerning

• Keyboard Type( 3 H D c ) 9

• Line Limit

• Line Spacing

• Minimum Scale Factor

• Multiline TextG ! _ m # c g h AlignY H R , 0ment

• Strikethr1 U Z ough

• Text Contenz J o D I I p It Type

• Track@ o X 5ing

• Truncation Mode

• Underline

Image

• Antialiased

• Symbol Image Scale

• Interpolation

• Image Rendering Mode

• Image Res. – 8 Fizable

List

• Delete Disabled

• List Row Background

• Li– 4 Ast Row Insets

• List Row Platter Color

• MoveQ j 2 w c ` Disabled

• On Delete

• On Insert

• On Move

Navigation Bar

• Na| g X n c v yvigation Bar Back Button Hidden

• Navigati( ] p %on Bar Hidden

• Navigation Bar Items

• Navigation Bar Title

Style

• Button Sty^ R D }le

• Date Picker Style

• List Style

• Menu Button Style

• Navigation Vie0 ! B s 7w Style

• Pic/ U 0ker Style

• Text Field Style

• Toggle Style

Modifiera – 2 %s

• Action

• Adjustable Action

• Element

• Scroll Action

• Activation Pg J Y W k * !oint

• Add Traits

• Hidden

• Hint

• IdentifJ n ~ X yier

• Label

• Remove Traits

• Sort Priority

• Value

Events

• Digital Crown Ry d zotation

• On Appear

• On Command

• On Copy Command( L | – .

• On Cut Command

• On Delete Command

• On Disappear

• Ong @ f h ) F D3 v | 9 G % #rag

• On Drop

• On Exit Command

• On Hover

• On Move Command

• On Paste Command

• On Play Pause Command

• On Preferen. p } ( 4ce Change

• On Receive

Gestures

• Drag Gesture

• Exclusive Gesture

• Gesture

• High Priority Gesture

• Magnification Gesture

• On Long Press Gesture

• On Tap Gesture

• Rotation Gesture

• Sequence Gesture

• Simultaneous Gesture

Shape

• Fill

• Offe k 6 } . Nset

• Rotation

• Scale

• Size

• Transform

• Trim

Other

• Allows Hit Testing

• Animation

• Disabled

• EnviZ z Rronmenh y L Vt

• Environment Object

• Equatable

• Id

• Preference

• Tag

• Tras z f –nsaction

• Transform Environment

• Transform PrefeP & { O ! z ? ;rence

• Transition