Inhaltsverzeichnis
TUI Layout
Odzivna razporeditev s sidranjem kot privzeto za TUI aplikacije.
Sidranje je privzet način - vsaka kontrola se pravilno obnaša ob spremembi velikosti terminala brez posebnih vsebnikov.
Osnovno načelo
Sidranje kot privzeto pomeni: - Sprememba velikosti terminala ne sme pokvariti razporeditve, fokusa in izrisovanja - Kontrole ohranjajo stabilne prostorske odnose - Predvidljiva pravila raztezanja/krčenja
Semantika sidra
Razpoložljiva sidra
| Sidro | Pomen |
| Left | Razdalja do levega roba ostane konstantna |
|---|---|
| Top | Razdalja do zgornjega roba ostane konstantna |
| Right | Razdalja do desnega roba ostane konstantna |
| Bottom | Razdalja do spodnjega roba ostane konstantna |
Kombinacije
Privzeto: Left + Top → Položaj ostane stabilen, velikost konstantna Left + Right: → Širina se raztegne/skrči s širino starša Top + Bottom: → Višina se raztegne/skrči z višino starša Vsa štiri (Left + Top + Right + Bottom): → Pravokotnik se raztegne v obe smeri Brez sider: → Obravnavaj kot Left + Top (brez "lebdeče" dvoumnosti)
PXAML primeri
<!-- Fiksna pozicija zgoraj levo --> <Button Anchors="Left,Top" Text="OK" /> <!-- Polna širina, fiksna višina --> <TextEdit Anchors="Left,Top,Right" Height="3" /> <!-- Zapolni celotno razpoložljivo območje --> <ListView Anchors="Left,Top,Right,Bottom" /> <!-- Statusna vrstica spodaj --> <StatusBar Anchors="Left,Right,Bottom" Height="1" />
Obnašanje ob spremembi velikosti
Potek ob spremembi velikosti
1. Prejet dogodek spremembe velikosti └─ Posodobi razpoložljiv pravokotnik korena 2. Razveljavi razporeditev └─ Izvedi prehod Measure/Arrange 3. Ohrani fokus └─ Ista logična kontrola ohrani fokus 4. Izriši ponovno └─ Paint → DiffFlush
Deterministično
OBVEZNO: - Enak vhod → Enaka razporeditev - Brez utripanja pri hitri spremembi velikosti - Brez pokvarjenega kurzorja - Fokus ostane na logični kontroli
Prelomne točke
Opcijski a priporočeni pragovi spremembe velikosti:
Standardne prelomne točke
| Prelomna točka | Širina | Tipična razporeditev |
| Narrow | < 80 | En stolpec, naloženo |
|---|---|---|
| Medium | 80-119 | Stranska vrstica strnjena v zavihke |
| Wide | >= 120 | Stranska vrstica + vsebina ena ob drugi |
PXAML konfiguracija
<Panel ResponsiveMode="Auto" Breakpoints="80,120"> <!-- Samodejno prerazporejanje ob preseženi prelomni točki --> </Panel>
Pravila prelomnih točk
OBVEZNO: - Prelomne točke NISO "čarovnija" - definiraj v PXAML ali konfiguraciji teme - Dokumentiraj prelomne točke - Jasno definiraj obnašanje pri vsaki prelomni točki
Vsebniki za razporeditev
Stack
Usmerjenost: Navpično ali vodoravno Otroci se razporedijo zaporedno
<Stack Orientation="Vertical"> <Label Text="Ime:" /> <TextEdit /> <Label Text="E-pošta:" /> <TextEdit /> </Stack>
Dock
Položaji: Left, Top, Right, Bottom, Fill Otroci se pripnejo na strani, preostanek zapolni sredino
<Dock> <MenuBar Dock="Top" /> <StatusBar Dock="Bottom" /> <Sidebar Dock="Left" Width="20" /> <Content Dock="Fill" /> </Dock>
Overlay
Za pojavna okna, modalna okna, namige Prekrije druge kontrole Mora ostati znotraj meja zaslona (prirezano)
<Overlay> <Dialog X="10" Y="5" Width="40" Height="10"> <!-- Vsebina modalnega okna --> </Dialog> </Overlay>
Grid (kasneje)
Definiraj vrstice in stolpce Postavi kontrole v celice
Prednost sidranja
Vrstni red izračuna razporeditve:
1. Razporeditev vsebnika (če eksplicitno) └─ Stack/Grid/Dock/Overlay izračuna pravokotnike otrok 2. Uporabi sidra └─ Izboljšaj znotraj pravokotnika vsebnika └─ Upoštevaj Min/Max └─ Ohrani Margins/Padding 3. Obrezovanje nazadnje └─ Oreži končne meje
Drsenje in vidno polje
Ko je vsebina večja od območja
PREDNOSTNO: - Uporabi vsebnik ScrollViewer - Naredi vsebino drsljivo NE kot privzeto: - Besedilo "skrči, da se prilega" OBVEZNO: - Kontrole lahko izrisujejo v manjšem pravokotniku (obrezovanje + tropičje) - Stanje se ne sme izgubiti
Primer ScrollViewer
<ScrollViewer Anchors="Left,Top,Right,Bottom"> <Stack Orientation="Vertical"> <!-- Dolg seznam kontrol --> </Stack> </ScrollViewer>
Fokus ob prerazporeditvi
OBVEZNO: - Fokus se sledi prek identitete kontrole (ne položaja na zaslonu) - Po prerazporeditvi: - Če fokusirana kontrola še vedno fokusabilna in vidna → ohrani - Sicer: nadomestno na naslednjega fokusabilnega sorojenca v vrstnem redu fokusa
Stabilnost fokusa
procedure TLayoutEngine.ApplyReflow; var PreviousFocus: TWvdSControl; begin (* Zapomni fokus *) PreviousFocus := FocusManager.FocusedControl; (* Ponovno izračunaj razporeditev *) MeasureAndArrange(RootControl); (* Obnovi fokus *) if (PreviousFocus <> nil) and PreviousFocus.CanFocus and PreviousFocus.IsVisible then FocusManager.SetFocus(PreviousFocus) else FocusManager.FocusNextAvailable; end;
Preverjanje
Testi spremembe velikosti
[ ] Ponavljanje Narrow ↔ Wide: brez utripanja [ ] Kurzor ni pokvarjen po spremembi velikosti [ ] Fokus ostane na isti kontroli [ ] Sidrno raztegnjene kontrole se ne prekrivajo [ ] Pojavna okna/prekrivanja ostanejo v mejah zaslona
Testi prelomnih točk
[ ] Razporeditev se pravilno preklopi ob preseženi prelomni točki [ ] Brez utripanja ob preklopu prelomne točke [ ] Vse prelomne točke dokumentirane
Testi vsebnikov
[ ] Stack pravilno razporedi otroke [ ] Dock pravilno zapolni (Left, Top, Right, Bottom, Fill) [ ] Overlay ostane v mejah [ ] Ugnezdeni vsebniki delujejo
PXAML referenca
Atributi kontrol
| Atribut | Vrednosti | Pomen |
| Anchors | Left,Top,Right,Bottom | Kombinacije sider |
|---|---|---|
| Margin | „l,t,r,b“ ali „vse“ | Zunanji odmik |
| Padding | „l,t,r,b“ ali „vse“ | Notranji odmik |
| MinWidth | Integer | Minimalna širina |
| MaxWidth | Integer | Maksimalna širina |
| MinHeight | Integer | Minimalna višina |
| MaxHeight | Integer | Maksimalna višina |
Atributi vsebnikov
| Atribut | Vrednosti | Pomen |
| ResponsiveMode | Auto, Manual | Samodejno rokovanje s prelomnimi točkami |
|---|---|---|
| Breakpoints | „w1,w2,…“ | Širine prelomnih točk |
Glejte tudi
Zuletzt geändert: dne 29.01.2026 ob 22:26