2e659385488cb54c1adee0fbe53caead
SwiftUI 布局之组件对齐实现上下对齐和水平居中 (教程含源码)

实战需求

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

本文价值与收获

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

截屏2020-11-18 下午8.11.49.png

截屏2020-11-18 下午8.11.49.png

看完本文您将掌握的技能

  • 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
top Created with Sketch.