SwiftUI - Versionsgeschichte

134.3.86.14 am 22. Dezember 2022 um 07:47 Uhr

2022-12-22T07:47:54Z

134.3.86.14 am 21. Dezember 2022 um 19:26 Uhr

2022-12-21T19:26:24Z

134.3.86.14 am 21. Dezember 2022 um 14:54 Uhr

2022-12-21T14:54:36Z

134.3.86.14: Die Seite wurde neu angelegt: „SwiftUI gilt als Nachfolger von Apples UIKit zum Erstellen von Benutzeroberflächen (UserInterface). Es kann sowohl für Desktop als auch für Mobile Geräte g…“

2022-12-21T14:40:41Z

Die Seite wurde neu angelegt: „SwiftUI gilt als Nachfolger von Apples UIKit zum Erstellen von Benutzeroberflächen (UserInterface). Es kann sowohl für Desktop als auch für Mobile Geräte g…“

Neue Seite

SwiftUI gilt als Nachfolger von Apples UIKit zum Erstellen von Benutzeroberflächen (UserInterface). Es kann sowohl für Desktop als auch für Mobile Geräte genutzt werden.

Bei UIKit hat klassisch in MVC (Model View Controller) Manier programmiert. D.h. man hat einen Controller, der den Datenfluss zwischen der Datenhaltung und dem View also der Benutzeransicht gemanagt hat.

Bei SwiftUI erzeugt man Bindings zwischen Model und View und das System kontrolliert selbst den Datenfluss. Es kann also das Model automatisch aktualisieren wenn der Benutzer etwas tut. Oder es aktualisiert den View, wenn das Model es verlangt. Das spart eine Menge Programmierarbeit.

== Beispiele ==
SwiftUI - Color Picker

<syntaxhighlight lang="swift">
//
// ContentView.swift
// ColorPicker
//
// Created by Stephan Schlegel on 20.12.22.
//

import SwiftUI

struct ContentView: View {
// state vars
// it's commonly good practice to make them private
// These vars are the "source of truth" meaning it
// owns the data. We need no other copy of the data.
@State private var r: Double = 239
@State private var g: Double = 141
@State private var b: Double = 82

var body: some View {
ZStack{
Rectangle()
.foregroundColor(Color(.systemFill))
.ignoresSafeArea()
VStack {

Rectangle()
.frame(width: 100, height: 100)
.foregroundColor(Color(red:r/255,green:g/255, blue:b/255))
.border(Color(.black),width:1)

// Passing in State Var Bindings to the Slider View.
// This way it can read and write from/to the vars
SliderView(label:"Red",value: $r)
SliderView(label:"Green",value: $g)
SliderView(label:"Blue",value: $b)
}
.padding()
}

}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()

}
}
</syntaxhighlight>

<syntaxhighlight lang="swift">
//
// SliderView.swift
// ColorPicker
//
// Created by Stephan Schlegel on 20.12.22.
//

import SwiftUI

struct SliderView: View {

var label:String
@Binding var value:Double

var body: some View {
VStack{
Slider(value:$value, in: 0...255, step: 1)
Text("\(label): \(Int(value))")
}

}
}

struct SliderView_Previews: PreviewProvider {
static var previews: some View {
// For Preview we pass in label and value from Slider view
// value is not a real binding but at least we can
// see something in our preview to imagin where we go
SliderView( label: "Label",value:Binding.constant(0) )
.padding()
}
}

</syntaxhighlight>

SwiftUI - Slot Machine

@@ Zeile 1: / Zeile 1: @@
-SwiftUI gilt als Nachfolger von Apples UIKit zum Erstellen von Benutzeroberflächen (UserInterface). Es kann sowohl für Desktop als auch für Mobile Geräte genutzt werden.
+== Einführung ==
 Bei UIKit hat klassisch in MVC (Model View Controller) Manier programmiert. D.h. man hat einen Controller, der den Datenfluss zwischen der Datenhaltung und dem View also der Benutzeransicht gemanagt hat.
 Bei SwiftUI erzeugt man Bindings zwischen Model und View und das System kontrolliert selbst den Datenfluss. Es kann also das Model automatisch aktualisieren wenn der Benutzer etwas tut. Oder es aktualisiert den View, wenn das Model es verlangt. Das spart eine Menge Programmierarbeit.
 == Links ==
   [[Swift (Programmiersprache)]]

← Nächstältere Version		Version vom 21. Dezember 2022, 19:26 Uhr
Zeile 4:		Zeile 4:

	Bei SwiftUI erzeugt man Bindings zwischen Model und View und das System kontrolliert selbst den Datenfluss. Es kann also das Model automatisch aktualisieren wenn der Benutzer etwas tut. Oder es aktualisiert den View, wenn das Model es verlangt. Das spart eine Menge Programmierarbeit.		Bei SwiftUI erzeugt man Bindings zwischen Model und View und das System kontrolliert selbst den Datenfluss. Es kann also das Model automatisch aktualisieren wenn der Benutzer etwas tut. Oder es aktualisiert den View, wenn das Model es verlangt. Das spart eine Menge Programmierarbeit.
		+	== Links ==
		+	[[Swift (Programmiersprache)]]

	== Beispiele ==		== Beispiele ==

← Nächstältere Version		Version vom 21. Dezember 2022, 14:54 Uhr
Zeile 97:		Zeile 97:

	SwiftUI - Slot Machine		SwiftUI - Slot Machine
		+	<syntaxhighlight lang="swift">
		+	//
		+	// ContentView.swift
		+	// Slot Machine
		+	//
		+	// Created by Stephan Schlegel on 20.12.22.
		+	//
		+
		+	import SwiftUI
		+
		+	struct ContentView: View {
		+
		+	@State private var symbols = ["apple","coin","cherry"]
		+	@State private var symbolIndex = [0,1,2]
		+	@State private var backgrounds = [Color.white,Color.green,Color.red]
		+	@State private var credits:Int = 1000
		+	private var betAmount:Int = 5
		+
		+	var body: some View {
		+	ZStack{
		+
		+	Image("bg")
		+	.resizable()
		+	.ignoresSafeArea()
		+
		+	VStack{
		+	Spacer()
		+	// Title
		+	HStack{
		+	Image(systemName: "star.fill")
		+	.foregroundColor(Color(red:253/255,green:240/255,blue:7/255))
		+	Spacer()
		+	Text("SLOT MACHINE")
		+	.fontWeight(.black)
		+	.foregroundColor(.white)
		+	Spacer()
		+	Image(systemName: "star.fill")
		+	.foregroundColor(Color(red:253/255,green:240/255,blue:7/255))
		+	}.font(.title)
		+	.padding(.bottom)
		+	Spacer()
		+
		+	// Credits
		+	HStack{
		+	Text("Credits: " + String(credits))
		+	.padding(.all,10)
		+	.background(.white.opacity(0.75))
		+	.cornerRadius(20)
		+
		+	}
		+	.padding(.bottom)
		+	Spacer()
		+
		+	// Slots
		+	HStack{
		+	Spacer()
		+	SlotView( symbolName:$symbols[symbolIndex[0]], background:$backgrounds[0] )
		+	SlotView( symbolName:$symbols[symbolIndex[1]], background:$backgrounds[1] )
		+	SlotView( symbolName:$symbols[symbolIndex[2]], background:$backgrounds[2] )
		+	Spacer()
		+	}
		+	.padding(.bottom)
		+	Spacer()
		+
		+	// Button
		+	Button(
		+	action: {
		+	// reset background color
		+	// self.backgrounds[0] = Color.white
		+	// self.backgrounds[1] = Color.white
		+	// self.backgrounds[2] = Color.white
		+	// NOTE: We can use a map function on each element of the array instead:
		+	self.backgrounds = self.backgrounds.map({ _ in Color.white})
		+
		+	// Change Inages randomly after click
		+	// self.symbolIndex[0] = Int.random(in: 0...self.symbols.count-1)
		+	// ...
		+	self.symbolIndex = self.symbolIndex.map({
		+	_ in Int.random(in: 0...self.symbols.count-1)
		+	})
		+
		+	// Calc bet results
		+	if self.symbolIndex[0] == self.symbolIndex[1] && self.symbolIndex[0] == self.symbolIndex[2] {
		+	// Won
		+	self.credits += self.betAmount * 10
		+	// NOTE: we can strip the () after map here
		+	self.backgrounds = self.backgrounds.map{_ in Color.green}
		+	} else {
		+	self.credits -= self.betAmount
		+	}
		+	},
		+	label: {
		+	Text("Spin")
		+	.font(.title2)
		+	.fontWeight(.medium)
		+	.padding(.all,10)
		+	.padding([.leading,.trailing],25.0)
		+	.background(Color(hue: 0.107, saturation: 0.944, brightness: 0.818))
		+	.foregroundColor(.white)
		+	.cornerRadius(20)
		+
		+
		+	})
		+	Spacer()
		+	}
		+	.padding()
		+	}
		+	}
		+	}
		+
		+	struct ContentView_Previews: PreviewProvider {
		+	static var previews: some View {
		+	ContentView()
		+	}
		+	}
		+	</syntaxhighlight>
		+
		+	<syntaxhighlight lang="swift">
		+	//
		+	// SlotView.swift
		+	// Slot Machine
		+	//
		+	// Created by Stephan Schlegel on 21.12.22.
		+	//
		+
		+	import SwiftUI
		+
		+	struct SlotView: View {
		+
		+	@Binding var symbolName:String
		+	@Binding var background:Color
		+
		+	var body: some View {
		+	Image(symbolName)
		+	.resizable()
		+	.aspectRatio(1, contentMode: .fit)
		+	.padding(.all,20)
		+	.background(background.opacity(0.6))
		+	.cornerRadius(20)
		+	}
		+	}
		+
		+	struct SlotView_Previews: PreviewProvider {
		+	static var previews: some View {
		+	SlotView(symbolName:Binding.constant("coin"),background:Binding.constant(Color.green))
		+	}
		+	}
		+
		+	</syntaxhighlight>