Vistes de la xarxa SwiftUI · objc.io

IN la nostra sèrie actual de Swift Talk
, vam tornar a implementar parts del sistema de disseny SwiftUI per obtenir una comprensió més profunda del seu funcionament. La setmana passada vam examinar les vistes de xarxa de SwiftUI i vam tornar a implementar el seu algorisme de disseny. Algunes parts del comportament ens van sorprendre realment.

Fa uns dies nosaltres tweet sèrie de proves de disseny
per a SwiftUI LazyVGrid
per ressaltar alguns dels comportaments menys evidents. En aquest post, examinarem les tres preguntes del qüestionari i explicarem per què el web presenta el seu contingut de la mateixa manera que ho fa.

Curiosament, no hem estat els únics que hem intentat entendre el comportament de les xarxes: cap de les respostes més populars a la prova no era correcta.

# 1: columnes fixes i adaptatives

El primer exemple defineix una xarxa amb una columna fixa i adaptativa. La quadrícula té una amplada fixa de 200 punts:

								LazyVGrid(columns: [
    GridItem(.fixed(70)),
    GridItem(.adaptive(minimum: 40))
]) {
    
}
.frame(width: 200)
.border(Color.white)

							

Les tres solucions que us vam demanar que trieu:

La solució A és correcta.

Per a les reixes, les columnes de mida fixa sempre es mostren exactament a l’amplada especificada, independentment de l’espai disponible. Per tant, la primera columna es mostra amb una amplada exacta de 70 punts.

La quadrícula resta l’amplada fixa de les columnes i la distància entre les columnes (que és la distància predeterminada de 8 punts) de l’amplada proposada (que és 200 punts en aquest exemple), deixant-nos amb l’amplada restant de 122 punts. Aquesta amplada es distribueix a les altres columnes. En aquest cas, només queda una columna, una columna adaptativa, de manera que ocupa l’amplada restant de 122 punts.

Les columnes adaptatives són especials: SwiftUI intenta encabir tants elements de xarxa com sigui possible en una columna adaptativa; divideix l’amplada de la columna per l’amplada mínima, tenint en compte la distància.

En el nostre exemple anterior, tenim un interval per defecte de 8 punts i podem posar dues columnes (40 + 8 + 40) en 122 punts. Ha fallat un intent de col·locar tres columnes (40 + 8 + 40 + 8 + 40). La columna adaptativa té una amplada efectiva de 122 menys 8, cosa que proporciona 114 punts de distribució. Dividir 114 punts pel nombre de columnes ens dóna dos elements amb una amplada de 57.

# 2: columnes flexibles i adaptatives

La segona prova té una quadrícula amb una columna flexible i adaptativa:

								LazyVGrid(columns: [
    GridItem(.flexible(minimum: 140)),
    GridItem(.adaptive(minimum: 70))
], content: {
    
})
.frame(width: 200)
.border(Color.white)

							

Les tres solucions potencials:

La solució C és correcta.

A diferència del primer exemple, aquesta xarxa no té columnes fixes, de manera que la xarxa comença amb una amplada disponible de 200 punts menys 8 punts per defecte entre les dues columnes, cosa que ens proporciona 192 punts.

A continuació, la graella es gira sobre les columnes restants (sense fixar) d’una fila i calcula l’amplada de cada columna com l’amplada restant dividida pel nombre de columnes restants ajustades per les restriccions mínima i màxima de les columnes.

En aquest exemple, l’amplada de la primera columna es calcula com a 192 punts de l’amplada restant dividida per 2 columnes restants, que és igual a 96 punts. Com que hem especificat una amplada mínima de 140 punts per a la primera columna flexible, es premen 96 punts entre 140 i infinit. La columna arriba a tenir l’amplada mínima de 140 punts, i l’amplada restant és ara 192 menys 140, cosa que dóna 52 punts.

Ara l’amplada de la segona columna es calcula com a 52 punts d’amplada restant dividida per 1 columna restant, que és igual a 52 punts. Podem esperar que aquest resultat es fixi a l’amplada mínima de la columna adaptativa de 70 punts, però la propietat mínima de la columna adaptativa només s’utilitza per calcular el nombre d’elements d’aquesta columna. D’aquesta manera, la columna adaptativa té una amplada de 52 punts.

L’element de la columna adaptativa també es mostra amb una amplada de 52 punts, tot i que hem especificat un mínim de 70 punts. Si hi ha menys espai que l’amplada mínima de l’element, s’ignora l’amplada mínima i es visualitza l’element amb qualsevol amplada restant.

# 3: diverses columnes flexibles

La tercera prova té una quadrícula amb dues columnes flexibles:

								LazyVGrid(columns: [
    GridItem(.flexible(minimum: 50)),
    GridItem(.flexible(minimum: 120))
], content: {
    
})
.frame(width: 200)
.border(Color.white)

							

Les tres solucions potencials:

La solució A és correcta.

Aquest disseny aparentment senzill mostra potser el comportament més confús dels tres exemples d’aquesta publicació. La quadrícula no només està fora dels límits, tot i que els mínims de les columnes s’adaptarien amb gust a l’amplada disponible de 200 punts, sinó que també es troba fora del centre del recinte de 200 punts d’amplada.

Anem a través dels passos de l’algorisme de disseny de xarxa i veiem què passa. Comencem de nou amb una amplada restant de 200 punts menys 8 punts per defecte, cosa que ens proporciona 192 punts. Per a la primera columna calculem l’amplada de 192 dividida per 2 columnes restants, que és igual a 96 punts. Com que la primera columna té una amplada mínima de 50 punts, l’amplada de 96 punts no es veu afectada per l’estretor, de manera que l’amplada restant és de 96 punts. La segona columna es converteix en 96 punts, fixada a un mínim de 120 punts, és a dir. 120 punts d’amplada.

Tanmateix, això no és el que veiem en representar aquesta quadrícula: la primera columna mostra una amplada de 108 punts, la segona – 120 punts d’amplada, mentre que calculem 96 punts i 120 punts.

Per entendre aquesta part, hem de recordar que SwiftUI primer calcula els marcs de totes les vistes abans de mostrar-les a la segona passada. Amb el nostre càlcul anterior, l’amplada total de la xarxa es calcula com a 96 + 8 + 120 = 224 punts. A continuació, el marc fix amb una amplada de 200 punts al voltant de la quadrícula centra la quadrícula, movent-la (224-200) / 2 = 12 punts cap a l’esquerra.

Quan arriba el moment de visualitzar la quadrícula, comença amb l’amplada definida al pas de disseny, que és de 224 punts, però en realitat calcula l’amplada de les columnes. de nou
basat en una amplada de 224 punts.

En aquest sentit, les quadrícules difereixen significativament de les piles: les piles recordaran les dimensions dels seus fills entre el disseny i la representació i, per tant, evitaran aquest comportament inesperat, mentre que les xarxes no semblen fer-ho.

Tornem a revisar els càlculs de l’amplada de la columna, començant per l’amplada restant de 224 punts menys un interval de 8 punts o 216 punts. La primera columna es converteix en 216 punts, dividits en 2 columnes restants, igual a 108 punts. L’amplada restant és ara de 216 menys 108, cosa que ens proporciona 108 punts. La segona columna es converteix en 108 punts, fixada al seu mínim de 120 punts.

I voile! Hem assolit l’amplada correcta de les columnes de 108 i 120 punts.

Com que el marc al voltant de la quadrícula va calcular l’origen de la quadrícula en funció de l’amplada inicial de 224 punts, però ara resulta que l’amplada total té 108 + 8 + 120 = 236 punts, la quadrícula es veu fora del centre amb 6 punts.

Conclusió

En resum, aquests són els passos que segueix l’algorisme de disseny de xarxa:

  1. Comenceu per l’amplada suggerida com la resta de l’amplada.

  2. Resteu l’amplada de totes les columnes d’amplada fixa i la distància entre les columnes.

  3. Repeteix les altres columnes en ordre i

    • l’amplada de cada columna es calcula com l’amplada restant dividida pel nombre d’altres columnes associades al mínim i al màxim de la columna.

    • resteu l’amplada de la columna de l’amplada restant.

Tingueu en compte que aquest algorisme s’executa una vegada durant el disseny i, de nou, durant la representació. Durant el disseny, l’algorisme comença amb l’amplada proposada de la vista pare, mentre que durant la visualització comença amb l’amplada total calculada des del disseny de disseny inicial.

Aquest comportament pot ser força poc intuitiu, però esperem que aquesta publicació us ajudi a comprendre millor aquest comportament i a obtenir els resultats que esteu buscant.

Seguirem S’ha explicat el disseny de SwiftUI
sèrie fins al desembre. Cada episodi torna a representar un aspecte del sistema de disseny i, amb sis episodis ja llançats, hi ha alguna cosa a aprendre.

Per donar-nos suport i accedir a tot el nostre catàleg, subscriu-te aquí
.

Add a Comment

Your email address will not be published. Required fields are marked *