实战需求

SwiftUI 布局之组件对齐实现上下对齐和水平居中

本文价值与收获

看完本文后，您将能够作出下面的界面

看完本文您将掌握的技能

• ZStack(alignment: Alignment.top)
• Color.red.opacity(0.5)
• alignment: .bottom

基础知识

ZStack

覆盖其子项的视图，使子项在两个轴上对齐。

@frozen struct ZStack<Content> where Content : View

主题

创建堆栈

1、init(alignment: Alignment, content: () -> Content)

创建具有给定对齐方式的实例。

2、struct Alignment

两轴对齐。

Color

与环境有关的颜色。

@frozen struct Color

总览

AColor是后绑定令牌：SwiftUI仅在给定环境中使用它之前才将其解析为具体值。

话题

创建颜色

• init(String, bundle: Bundle?)
  创建一种命名的颜色。
• init(Color.RGBColorSpace, red: Double, green: Double, blue: Double, opacity: Double)
• init(Color.RGBColorSpace, white: Double, opacity: Double)
• init(hue: Double, saturation: Double, brightness: Double, opacity: Double)
  enum RGBColorSpace

访问标准颜色

• static var accentColor: Color
  代表系统或应用程序重点色的颜色。
• static let black: Color
• static let blue: Color
• static let clear: Color
  系统元素和应用程序使用的一组颜色。
• static let gray: Color
• static let green: Color
• static let orange: Color
• static let pink: Color
• static let primary: Color
• static let purple: Color
• static let red: Color
• static let secondary: Color