Siirry pääsisältöön

ColumnsLayout

Avaa ChatGPT:ssä
Varjo dwc-columns-layout 24.10
Java API

ColumnsLayout -komponentti järjestää kohteita responsiiviseen sarakepohjaiseen asetteluun, joka mukautuu saatavilla olevan leveyden mukaan. Katkot ja kohdistukset hallitaan automaattisesti, joten monisarakkeisten lomakkeiden ja sisältöruutujen rakentaminen ei vaadi mukautettua responsiivista logiikkaa.

Oletuskäyttäytyminen​

Oletuksena ColumnsLayout järjestää kohteet kahteen sarakkeeseen ja vie koko vanhemman leveyden. Näyttöä voidaan lisäksi säätää katkojen ja kohdistusasetusten avulla, jotka käsitellään seuraavissa osioissa.

Näytä koodi

Vaakasuorat asettelut

Tätä voidaan käyttää sijasta tai yhdessä FlexLayout -komponentin kanssa, joka on yhtä voimakas työkalu vaakasuorille asetteluilla.

Katkot​

ColumnsLayout on pääasiassa suunniteltu tarjoamaan joustava, ruudukkomuotoinen järjestelmä, joka mukautuu vanhemman säiliön leveyteen. Toisin kuin perinteiset kiinteät ruudukkojärjestelmät, tämä asettelu sallii kehittäjien määrittää sarakkeiden määrän tietyssä leveydessä ja laskee dynaamisesti näytettävien sarakkeiden määrän asetettujen Breakpoint-objektien perusteella.

Tämä sallii ColumnsLayout-komponentin sopeutuvan sujuvasti pienissä näytöissä kapeammasta tilasta laajempaan tilaan suurilla näytöillä, tarjoten kehittäjälle responsiivisen suunnittelun ilman mukautettua toteutusta.

Ymmärrys Breakpoint-kohdasta​

Breakpoint voidaan määrittää käyttämällä Breakpoint-luokkaa, joka ottaa kolme parametria:

  1. Nimi (valinnainen): Katkovaiheen nimeäminen mahdollistaa sen viittaamisen tulevissa konfiguroinneissa.

  2. Minimi leveys: Jokaisella katkovaiheella on tietty alue, joka määrittää, milloin sen asettelu otetaan käyttöön. Minimi leveys määritellään nimenomaisesti, ja seuraava katkovaihe määrittää maksimi leveyden, jos se on olemassa. Voit käyttää kokonaislukuja määrittääksesi minimi leveyden pikseleinä tai käyttää String-tyyppiä määrittääksesi muita yksiköitä, kuten vw, %, tai em.

  3. Sarakkeiden määrä: Määritä, kuinka monta saraketta katkovaiheella tulisi olla tällä kokonaisluvulla.

Breakpoint-evaluointi

Katkovaiheita arvioidaan koon mukaiseen nousevaan järjestykseen, mikä tarkoittaa, että asettelu käyttää ensimmäistä vastaavaa katkovaihetta.

Katkojen soveltaminen​

Katkokset sovelletaan ColumnsLayout-komponenttiin yhdellä kahdesta tavalla: rakentamisen aikana tai List-listan avulla käyttämällä setBreakpoints()-menetelmää:

ColumnsLayout layout = new ColumnsLayout();

List<Breakpoint> breakpoints = List.of(
  // Yksi sarake leveydellä >= 0px
  new Breakpoint(0, 1),
  // Kaksi saraketta leveydellä >= 600px
  new Breakpoint(600, 2),
  // Neljä saraketta leveydellä >= 1200px
  new Breakpoint(1200, 4));

layout.setBreakpoints(breakpoints);

Alla oleva esimerkki näyttää, miten useita katkoja asetetaan rakentamisen aikana, käyttäen katkoja määrittämään komponentin Span ja havainnollistaa ColumnsLayout-komponentin koon muuttumismahdollisuuksia, kun sovellusta muutetaan:

Näytä koodi

Sarakkeen Span ja spanit per Breakpoint​

Sarakkeiden laajuudet ColumnsLayout-komponentissa mahdollistavat valvoa, kuinka monta saraketta kohteet vievät, antaen enemmän hallintaa asettelun ulkoasuista eri leveydellä. Tämä on erityisen hyödyllistä, kun tietyt elementit tarvitsevat enemmän tai vähemmän tilaa näytön koosta tai suunnitteluvaatimuksista riippuen.

Sarakelaajuuden hallinta​

Oletuksena jokainen kohde ColumnsLayout-komponentissa vie tarkalleen yhden sarakkeen. Voit kuitenkin mukauttaa tätä käyttäytymistä asettamalla sarakkeen laajuuden yksittäisille kohteille. Laajuus määrittää, kuinka monta saraketta kohde tulisi viedä.

Button button = new Button("Klikkaa minua");
layout.addComponent(button);
// Kohde kattaa kaksi saraketta
layout.setSpan(button, 2);

Yllä olevassa esimerkissä painike vie kaksi saraketta oletuksena olevan yhden sijasta. setSpan()-menetelmä antaa sinun määrittää, kuinka monta saraketta komponentti tulisi kattaa asettelussa.

Sarakelaajuuden säätö katkojen avulla​

Voit myös säätää sarakelaajuuksia dynaamisesti katkojen perusteella. Tämä ominaisuus on hyödyllinen, kun haluat, että kohde kattaa eri määrän sarakkeita näyttökoon mukaan. Esimerkiksi, saatat haluta elementin vievän yhden sarakkeen mobiililaitteissa, mutta kattaa useita sarakkeita suuremmilla näytöillä.

TextField email = new TextField("Sähköposti");
//...
List.of(
  new ColumnsLayout.Breakpoint("oletus", 0 , 1),
  new ColumnsLayout.Breakpoint("pieni", "20em", 1),
  new ColumnsLayout.Breakpoint("keskikokoinen", "40em", 2),
  new ColumnsLayout.Breakpoint("suuri", "60em", 3)
)
//...
//sähköpostikenttä kattaa kaksi saraketta, kun keskikokoinen katkovaihe on aktiivinen
columnsLayout.setSpan(email, "keskikokoinen", 2);
//...

Tämä mukauttamisaste takaa, että asettelusi pysyy responsiivisena ja asianmukaisesti rakenteellisena eri laitteilla.

Kohteiden sijoittaminen sarakkeisiin​

ColumnsLayout tarjoaa mahdollisuuden sijoittaa kohteita tiettyihin sarakkeisiin, mikä antaa enemmän hallintaa elementtien järjestelyyn. Voit manuaalisesti määrittää, mihin kohtaan kohde tulee asettelussa, varmistaen tärkeiden komponenttien näkyvän tarkoitetulla tavalla.

Perussarakkeiden sijoittaminen​

Oletuksena kohteet sijoitetaan seuraavaan saatavilla olevaan sarakkeeseen, täyttäen vasemmalta oikealle. Voit kuitenkin ohittaa tämän käyttäytymisen ja määrittää tarkan sarakkeen, johon kohteen tulisi tulla sijoitetuksi. Sijoittaaksesi kohteen tiettyyn sarakkeeseen, käytä setColumn()-menetelmää. Tässä esimerkissä painike sijoitetaan asettelun toiseen sarakkeeseen, riippumatta siitä, missä järjestyksessä se on lisätty suhteessa muihin komponentteihin:

Button button = new Button("Lähetä");
layout.addComponent(button);
// Sijoita kohde toiseen sarakkeeseen
layout.setColumn(button, 2);

Sijoittamisen säätö katkojen mukaan​

Aivan kuten sarakelaajuuden kanssa, voit käyttää katkoja säätämään sijoittelua näyttökoon mukaan. Tämä on hyödyllistä elementtien uudelleenjärjestämisessä tai siirtämisessä asettelussa, kun näkymä muuttuu.

TextField email = new TextField("Sähköposti");
//...
List.of(
  new ColumnsLayout.Breakpoint("oletus", 0 , 1),
  new ColumnsLayout.Breakpoint("pieni", "20em", 1),
  new ColumnsLayout.Breakpoint("keskikokoinen", "40em", 2),
  new ColumnsLayout.Breakpoint("suuri", "60em", 3)
)
//...
//sähköpostikenttä ilmestyy toiseen sarakkeeseen, kun keskikokoinen katkovaihe on aktiivinen
columnsLayout.setColumn(email, "keskikokoinen", 2);
//...

Seuraavassa esityksessä huomaa, että kun "keskikokoinen" katkovaihe aktivoituu, sähköposti-kenttä kattaa molemmat sarakkeet, ja confirmPassword-kenttä sijoitetaan ensimmäiseen sarakkeeseen sen sijaan, että se olisi oletuksena sijoitettu toiseen sarakkeeseen:

Näytä koodi

Vältä törmäyksiä

Kun useita kohteita sijoitetaan asetteluun eri laajuuksilla ja/tai sarakeassignoinneilla, varmista, että sarakkeessa olevien kohteiden yhdistetyt laajuudet ja sijoitukset eivät mene päällekkäin. Asettelu yrittää hallita väliä automaattisesti, mutta huolellinen suunnittelu laajuuksista ja katkoista estää ei-toivottua kohteiden näyttöä.

Pystysuorat ja vaakasuorat kohdistukset​

Jokainen kohde ColumnsLayout-komponentissa voidaan kohdistaa sekä vaakasuoraan että pystysuoraan sen sarakkeessa, antamalla hallintaa siitä, miten sisältö sijoitetaan asetteluun.

Vaakasuuntaista kohdistusta ohjataan käyttämällä setHorizontalAlignment()-menetelmää. Tämä ominaisuus määrittää, kuinka kohde kohdistuu sarakkeessaan vaakasuoralla akselilla.

Pystysuora kohdistus määrittää, miten kohde sijoitetaan sarakkeessa pystysuoralla akselilla. Tämä on hyödyllistä, kun sarakkeilla on vaihteleva korkeus ja haluat hallita, kuinka kohteet jakautuvat pystysuunnassa.

Saatavilla olevat Alignment-vaihtoehdot ovat:

  • START: Kohdistaa kohteen sarakkeen vasempaan reunaan (oletus).
  • CENTER: Keskittää kohteen vaakasuoraan sarakkeessa.
  • END: Kohdistaa kohteen sarakkeen oikeaan reunaan.
  • STRETCH: Venyttää komponentin täyttämään asettelun.
  • BASELINE: Kohdistaa tekstin tai sisällön mukaan sarakkeessa, kohdistamalla kohteita tekstin peruslinjaan sen sijaan, että käytettäisiin muita kohdistusvaihtoehtoja.
  • AUTO: Automaattinen kohdistus.
Näytä koodi

Yllä olevassa esityksessä Lähetä-painikkeelle on annettu ColumnsLayout.Alignment.END varmistaakseen, että se ilmestyy vain sarakkeen loppuun, tai tässä tapauksessa sen oikealle puolelle.

Kohteiden väli​

Sarakkeiden välin hallinta ColumnsLayout-komponentissa sarakkeiden välillä (vaakasuora väli) ja rivien välillä (pystysuora väli) auttaa kehittäjiä hienosäätämään asettelua.

Asettaaksesi asettelun vaakasuoran välin, käytä setHorizontalSpacing()-menetelmää:

// Aseta 20px väli sarakkeiden väliin
layout.setHorizontalSpacing(20);

Samoin käytä setVerticalSpacing()-menetelmää määrittääksesi tilan rivien välillä asettelussa:

// Aseta 15px väli rivien väliin
layout.setVerticalSpacing(15);
CSS-yksiköt

Voit käyttää kokonaislukua määrittääksesi minimi leveyden pikseleinä tai käyttää String-tyyppiä määrittääksesi muita yksiköitä, kuten vw, %, tai em.

Vaakasuorat ja pystysuorat asettelut​

Responsiivisten ja houkuttelevien asettelujen luominen on mahdollista käyttämällä sekä FlexLayout -komponenttia että ColumnsLayout -komponenttia sekä niiden yhdistelmää. Alla on esimerkki FlexLayout -artikkelissa luodusta lomakkeesta, mutta käytetään ColumnLayout-kaavaa sen sijaan:

Näytä koodi

Tyylit​

Loading...