|
|
| (5 välissä olevaa versiota samalta käyttäjältä ei näytetä) |
| Rivi 22: |
Rivi 22: |
| ** [https://developer.apple.com/swift-playgrounds Learn to code with Swift Playgrounds] | | ** [https://developer.apple.com/swift-playgrounds Learn to code with Swift Playgrounds] |
|
| |
|
| == Perusteet ==
| | |
| import SwiftUI
| |
|
| |
| struct EsitysView: View {
| |
| var body: some View { // body on property
| |
| HStack { // teksti ja kuvat peräkkäin samalla rivillä
| |
| Text("Tekstiä")
| |
| .font(.largeTitle)
| |
| Image("KuvanNimi")
| |
| } // HStack
| |
|
| |
| VStack {
| |
| HStack {
| |
| Image("KuvanNimi")
| |
| VStack {
| |
| Text("Tekstiä")
| |
| .font(.caption)
| |
| }
| |
| }
| |
| }
| |
|
| |
| Image("KuvanNimi") // kuvanäkymä (view), kuvainstannsi
| |
| .resizable() // modifier
| |
| .scaledToFit()
| |
| Text("Tekstiä") // tekstinäkymä (view)
| |
| }
| |
| }
| |
| | |
| Seuraava tuottaa esikatselun edellisestä:
| |
| struct EsitysView_Previews: PreviewProvider {
| |
| static var prewiews: some View {
| |
| Stack {
| |
| EsitysView()
| |
| }
| |
| }
| |
| }
| |
| | |
| * '''argument''' on syötettävä arvo funktiolle sen toiminnan ohjaamiseksi. romuta(auto: 5) tai Text("teksti") jossa testi-muotoinen string syötetään argumenttina Text-funktiolle. Muuttujaa ei välttämättä tarvitse käyttää varastoimaan arvoa, esimerkiksi var romutaNäkymä = Text("Romuta"), vaan arvon voi suoraan syöttää Textille.
| |
| * '''boolean''' arvo on joko tosi (true) tai epätosi (false). Esimerkiksi 2 > 1 on tosi.
| |
| * '''body''' on näkymä, jossa sisältö tarjotaan. Ei datan luomisaluetta, vain näyttää näkymän.
| |
| * '''closure''' on funktio joka suorittaa jotain, mutta ei tarvitse nimeä. Closure voi säilyttää viittauksia kaikkiin vakioihin (constant) ja muuttujiin kontekstista jossa ne on määritelty. Esimerkiksi .toggle() eli onOn.toggle() joka muuttaa onOn arvon välillä tosi/epätosi.
| |
| * '''composition''' on osien yhdistämistä isommaksi kokonaisuudeksi. Esimerkiksi näkymien yhdistämistä.
| |
| * '''container''' on näkymä, jonka sisällä on muita näkymiä eli subviews.
| |
| ** 'Subviews' voivat sisältää omia subviews.
| |
| ** 'view hierarchy'. Hierarkian ylimpänä näkymäinstanssi.
| |
| * '''data flow''' Tiedon (data) kulku sovelluksessa ja kuinka tiedon eli arvojen muuttuminen vaikuttaa sovellukseen.
| |
| * '''data model''' Tiedon (data) esitysmuoto?. Sovellukselle yksittäinen totuuden lähde (source of truth), jossa kaikki tieto muokataan (modified).
| |
| * '''data separation''' Sovelluksen 'data model' tulee tai tulisi määrittää erillään UI:stä eli näkymästä!
| |
| * '''dot notation''' on syntaksi, jota käytetään kutsuttaessa properties tai instanssin metodia. Esim. auto.romutaAuto() kutsuu metodia romutaAuto() auto-instanssissa.
| |
| * '''function''' (funktio) nimetty koodin osa jota kutsutaan nimellä. Sille voidaan syöttää paremetrejä (paremeters) ja se voi palauttaa tietoa lopetettuaan. Funktio joka on määritelty tyypin sisällä on metodi. Esimerkiksi func romutaAuto() { nostaIlmaan() } jossa funktion nimi on romutaAuto ja sitä kutsutaan romutaAuto() ja se suorittaa yhden kerran tehtävän nostaIlmaan().
| |
| * '''initialization''' on toiminto, jossa luodaan uutta määrätyn tyyppistä instanssia, joka sisältää asetelman properties.
| |
| * '''Instance''' (instanssi) on tyypin määrätty arvo. Esimerkiksi let romuta = RomutaAuto() jossa 'romuta' on tyypin 'RomutaAuto' instanssi.
| |
| * '''Method''' (metodi) on nimetty koodin osa joka suoritetaan kutsumalla. Metodi on funktio, mutta se määritellään tyypin sisällä. Esimerkiksi let auto = Auto() auto.romutaAuto() kutsuu metodia romutaAuto instanssista Auto.
| |
| * '''Modifier''' säätää näkymän (view) ulkoasua ja toimintaa. Esimerkiksi Auto() .foregroundColor(.red) -modifier asettaa auto-näkymän punaiseksi. Jokainen modifier asetetaan omalle rivilleen allekkain ''käyttöjärjesteyksessä'' tai voidaan kirjoittaa peräkkäin.
| |
| * '''observe''' Objektin seuraamista sen tilan muutoksesta.
| |
| * '''Parameter''' on arvo jolla muokataan funktion toimintaa. Kutsuttaessa funktiota, sille voidaan lähettää paremetrejä. Esimerkiksi
| |
| func romuta(auto: Int {
| |
| for i in 1...auto {
| |
| nostaAuto()
| |
| }
| |
| }
| |
| * '''Property''' on tyypin sisällä määritelty muuttuja (variable). Nimetty sisältö, joka säilöö arvon. Propertyyn voidaan päästä instanssilla (instance), joka käyttää pistenotaatiota. Esimerkiksi auto.onRomuttamoHalli jossa onRomuttamoHalli on auto-tyypin property.
| |
| * '''Property wrapper''' suorittaa propertylle toiminnon yleisen patterinin. Esim. @State -property wrapper kertoo SwiftUI:lle, että se varastoi arvon ja kun arvo muuttuu, kaikissa näkymissä se päivittyy.
| |
| * '''Protocol''' on joukko requiremets, kuten methods ja properties, joita voidaan adoptoida tai seurata tyypillä kuten luokka (class), structure, enumeration. Kun tyyppi adoptoi protokollan, tyyppi tarjoaa sen oman protokollavaatimusten implementaation eli conform protokollaan.
| |
| * '''Range'''
| |
| ** 'lower/upper bound' aloitus/lopetusarvio otetaan huomioon. Esimerkiksi var asetettuAlue = 1...5
| |
| ** 'closed range'. Esimerkiksi var asetettuAlue = 1...5
| |
| ** ''half open range'. Esimerkiksi var asetettuAlue = 1..<5
| |
| let asetettuAlue = 1...5
| |
| for I in asetettuAlue {
| |
| print(i) // tulostaa 1 2 3 4 5
| |
| }
| |
| * '''State''' (tila) Informaatio joka varastoitu määrättynä aikana muuttujaan (variable), sovellukseen tai järjestelmään (system). Esimerkiksi muuttuja auto sisältää arvon 5, joten sen tila on 4. @State var onOn = true
| |
| ** 'state change' kun muuttujan arvo muuttuu.
| |
| ** 'state property' Lisättäessä @State ennen näkymä-propertyä, sen arvon muuttuessa kaikki näkymän osat päivittyvät.
| |
| * '''String''' on tekstiä.
| |
| * '''Type''' (tyyppi) on nimetty ryhmä ominaisuuksia (property, features) ja metodeja (methods, behaviors). Tyypillä luodaan ryhmiä toisiinsa liittyviä toimintoa, joita on helppo kutsua. Esimerkiksi struct Auto { var nimi : String func romutetaanteksti() { print("Romutetaan auto") } }
| |
| * '''user interface UI''' on käyttäjän kontrolloima sovelluksen osa.
| |
| * '''variable''' (muuttuja) on container, joka varastoi muutettavan arvon. Muuttuja voi sisältää erilaisia tyyppisiä arvoja. Esimerkiksi integers (5, -5), strings (tekstiä), ranges. Esimerkiksi var romutettavaAuto = 5 var romutettavaAuto = "Audi" var alue = 1...10 var romutettavaAuto = false
| |
| * '''View''' on sovelluksen käyttäjälle näkyvä "rakennuspalikka", esimerkiksi tekstiä, kuvia tai painikkeita. Luodaan uusi määrätyn tyyppinen instanssi. Esimerkiksi näkymän ulkoasua tai toimintaa voidaan säätää suoraan instansseilla kutsumalla niiden metodeja eli modifiers. Näkymät voivat muuttua aina kun sovelluksen tila muuttuu.
| |
| ** Text("Teksti")
| |
| *** .font(.largeTitle) .font on modifier ja .largeTitle on argument.
| |
| *** .font(.caption)
| |
| ** Image("KuvanNimi") .resizable() // kuvanäkymä, johon annetaan argumenttina 'KuvanNimi' ja modifier .resizable. Resizable mahdollistaa kuvan koon vaihdon eri suuntiin. .scaledToFit() säätää kuvan ympäröivän tilan kokoiseksi, mutta näyttää koko kuvan. .scaledToFill() täyttää koko ikkunan kokoiseksi, mutta osa kuvasta katoaa.
| |
| ** Button("Painiketeksti")
| |
| ** Capsule()
| |
| ** Circle() Ympyrä
| |
| ** Rectangle()
| |
| *** .frame(maxHeight: 100)
| |
| *** .foregroundColor (.yellow)
| |
| ** 'built-in view' on valmis näkymä kuten painike, teksti.
| |
| ** 'composed view' on näkymä, joka yhdistää yhden tai useampia built-in vies tai composed view. Composed view, joka alkaa struct JokuNimiNäkymä voidaan käyttää muun näkymän sisällä.
| |
| ** 'HStack' järjestää alanäkymät vaakatasossa vierekkäin. HStack on container näkymä.
| |
| ** 'VStack' järjestää alanäkymät pystytasossa yhteen.
| |
| | |
| * Komennot kirjoitetaan yhteen ja ne päättyvät sulkeisiin: romutaAuto() Komento suorittaa määrätyn tehtävän.
| |
| | |
| === Jos ja painike ===
| |
| onOn on property. Muokattaessa näkymää on ensin tiedettävä näkymän tila. Tieto tilasta tallennetaan näkymän propertyyn. Tässä tieto on boolean-arvo.
| |
| | |
| struct JosViews: View {
| |
| @State var onOn = false // aluksi ympyrä piilotettuna
| |
| var body: some View {
| |
| VStack {
| |
| if onOn { // sen mukaan ympyrä näkyy onko onOn tosi vai epätosi
| |
| Circle()
| |
| .frame(maxHeight: 100)
| |
| .foregroundColor(.green)
| |
| Text("arvo tosi")
| |
| }
| |
| else { // lisättäessä else alun jälkeen ympyrä vaihtaa väriä muodon ja vihreän ja punaisen välillä
| |
| Capsule()
| |
| .frame(maxHeight: 100)
| |
| .foregroundColor(.red)
| |
| Text("arvo epätosi")
| |
| }
| |
| Button("Paina") {
| |
| onOn.toggle()
| |
| }
| |
| }
| |
| }
| |
| }
| |
|
| |
| | |
| [[Luokka:Tietokoneet]] | | [[Luokka:Tietokoneet]] |