100 Days of SwiftUI - Day 23 项目3 Part1

通过这个项目我们将讨论一些深层次的问题,完成本项目,你会对SwiftUI有透彻的理解。

1.SwiftUI的view为什么是struct?

UIkit时使用类而不是结构体构造视图,而SwiftUI使用struct。

1.性能因素,结构体比类更简单,更快。
UIkit时,UIView是类,他有很多属性方法,子类继承了它的所有。
在SwiftUI中,使用结构体创建view的速度很快,它的大小取决于你给它多少属性。
2.除了性能外,类可以自由更改属性值,而结构体使我们以一种干净的方式隔绝状态,SwiftUI知道什么时候它会更改来更新UI。
SwiftUI让我们以更具功能性的方式来设计,视图变得简单,以惰性的方式数据转换为UI,而不是无法控制的智能方式。

2.main SwiftUI view的后面是什么?

当我们创建项目后,会得到一串代码Hello world的Text,我们给它加一个背景。

var body: some View {
    Text("Hello World")
       .background(Color.red)
}

它是这样的,


效果图

我们发现文本后有一大片的空白,在以前的UIKit时我们可以更改它,但在SwiftUI中你不可以这样做。

你要有另一种观念,view后没有任何东西,你所看到的,就是你拥有的。不要尝试通过SwiftUI意外的方式来操作。
所以我们如何将Text的背景充满这个屏幕。

Text("Hello World")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)

我们通过修改Text的frame,将maxWidthmaxHeight设为infinity,它会将frame变为infinity(可能的最大值)。但你会发现还在安全区域内,你可以使用edgesIgnoringSafeArea

Text("Hello World")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)
    .edgesIgnoringSafeArea(.all)

3.修饰符顺序很重要!

var body: some View {
        Button("Hello World") {
            print(type(of: self.body))
        }
        .background(Color.red)
        .frame(width: 200, height: 200)
    }

我们通过type(of:)打印出Button的类型,ModifiedContent<ModifiedContent<Button<Text>, _BackgroundModifier<Color>>, _FrameLayout>

你会发现:

  • 每次修改view,SwiftUI会使用泛型ModifiedContent<OurThing, OurModifier>来修改。
  • 使用多次会叠加起来。

在每个ModifiedContent类型里,都有一个要转化的视图和实际修改,而不是直接修改改视图。
所以修饰符顺序很重要
修改背景不用修改frame,并不会去重绘。
使用修饰符的一个问题是,多次使用相同效果,每个修饰符会简单的添加的以前的内容中。
例如,SwiftUI为我们提供了padding()修饰符。

Text("Hello World")
    .padding()
    .background(Color.red)
    .padding()
    .background(Color.blue)
    .padding()
    .background(Color.green)
    .padding()
    .background(Color.yellow)

这样会创建一个多个边框的背景。

4.为什么用some View类型?

5.条件修饰符

满足特定条件下才适用的修饰符,在SwiftUI中最简单的方法是三元运算符。

struct ContentView: View {
    @State private var useRedText = false

    var body: some View {
        Button("Hello World") {
            // flip the Boolean between true and false
            self.useRedText.toggle()            
        }
        .foregroundColor(useRedText ? .red : .blue)
    }
}

在某些情况下,也可以使用if else

6.环境修饰符

如果想将修改器应用于多个视图,例如在VStack中有四个文本视图,将修饰符应用于VStack,这被称为环境修改器。

VStack {
    Text("Gryffindor")
    Text("Hufflepuff")
    Text("Ravenclaw")
    Text("Slytherin")
}
.font(.title)
VStack {
    Text("Gryffindor")
        .blur(radius: 0)
    Text("Hufflepuff")
    Text("Ravenclaw")
    Text("Slytherin")
}
.blur(radius: 5)

像这个不会起作用,它是常规修饰符。
哪些是环境修饰符,需要你自己去试验一下。

7.视图作为属性

视图作为属性可以避免重复。

struct ContentView: View {
        
    let button = Button(action: {
    }, label: {
        Text("Button")
    })
    
    var body: some View {
        VStack {
            button
                .background(Color.red)
        }
    }
}

Swift不允许创建引用其它存储属性的存储属性,但是可以创建计算属性。

var motto1: some View { Text("Draco dormiens") }

8.视图分解

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            Text("First")
                .font(.largeTitle)
                .padding()
                .foregroundColor(.white)
                .background(Color.blue)
                .clipShape(Capsule())

            Text("Second")
                .font(.largeTitle)
                .padding()
                .foregroundColor(.white)
                .background(Color.blue)
                .clipShape(Capsule())
        }
    }
}

视图中有两个相同的文本视图,然后将他们包装在新的自定义视图中。

struct CapsuleText: View {
    var text: String

    var body: some View {
        Text(text)
            .font(.largeTitle)
            .padding()
            .foregroundColor(.white)
            .background(Color.blue)
            .clipShape(Capsule())
    }
}

你可以在原始视图中使用

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            CapsuleText(text: "First")
            CapsuleText(text: "Second")
        }
    }
}

9.自定义修饰符

通过modifier()修饰符来使用,我们创建一个自定义ViewModifier结构,

struct Title: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}
Text("Hello World")
    .modifier(Title())

将自定义修饰符,放在View的扩展上,是个不错的主意。

extension View {
    func titleStyle() -> some View {
        self.modifier(Title())
    }
}
Text("Hello World")
    .titleStyle()

ViewModifier还可以根据需要创建新的视图,我们可以添加视图,然后组合成新视图返回。


struct Watermark: ViewModifier {
    var text: String

    func body(content: Content) -> some View {
        ZStack(alignment: .bottomTrailing) {
            content
            Text(text)
                .font(.caption)
                .foregroundColor(.white)
                .padding(5)
                .background(Color.black)
        }
    }
}

extension View {
    func watermarked(with text: String) -> some View {
        self.modifier(Watermark(text: text))
    }
}

我们可以在任何地方添加水印。

Color.blue
    .frame(width: 300, height: 200)
    .watermarked(with: "Hacking with Swift")

10.自定义容器

自定义一个可填充网格类型的堆栈视图。

struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content
    
    init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
        self.rows = rows
        self.columns = columns
        self.content = content
    }

    var body: some View {
        VStack {
            ForEach(0..<rows, id: \.self) { row in
                HStack {
                    ForEach(0..<self.columns, id: \.self) { column in
                        self.content(row, column)
                    }
                }
            }
        }
    }
}

第一行–struct GridStack<Content: View>: View使用Swift的一个更高级的功能,称为泛型(generics),在这种情况下,这意味着“您可以提供所需的任何种类的内容,但是无论它是什么,都必须符合View协议。”同时 GridStack本身也符合View协议。

var body: some View {
        GridStack(rows: 2, columns: 2, content: { (row, col) in
            Image(systemName: "\(row * 4 + col).circle")
            Text("R\(row) C\(col)")
        })
    }

SwiftUI的一种功能(ViewBuilder),该功能允许我们发送多个视图并将其形成隐式堆栈。

多数情况下,只是将参数直接复制到结构的属性中,但请注意该@ViewBuilder属性在那里。您还将看到该@escaping属性,该属性使我们可以存储闭包,以备后用。

这样GridStack内加不加stack都可以了,随你。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355