Siirry pääsisältöön

ColumnsLayout

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

ColumnsLayout-komponentti webforJ:ssä antaa kehittäjille mahdollisuuden luoda asetteluja käyttämällä joustavaa ja responsiivista pystyasettelua. Tämä asettelu tarjoaa dynaamisesti mukautuvia sarakkeita, jotka säätävät itseään käytettävissä olevan leveyden mukaan. Tämä komponentti yksinkertaistaa monisarjaisten asetteluiden luomista hallitsemalla automaattisesti katkaisuja ja kohdistuksia.

Vaakasuorat asettelut

Tätä voidaan käyttää FlexLayout-komponentin kanssa tai sen sijaan - yhtä tehokas työkalu vaakasuoriin asetteluisiin.

Perusasiat​

Kun ColumnsLayout instansioidaan ensimmäisen kerran, se käyttää kahta saraketta näyttääkseen asetteluun lisätyt kohteet. Oletusarvoisesti se vie koko vanhempiensa elementtien leveyden ja kasvaa tarpeen mukaan lisäämään sisältöä. Lisättyjen kohteiden näyttöä voidaan kalibroida entisestään käyttäen Breakpoint ja Alignment asetuksia, joista keskustellaan seuraavissa osioissa tarkemmin.

Näytä koodi

Katkaisut​

Perustaltaan ColumnsLayout on suunniteltu tarjoamaan nesteenä toimiva, ruudukkomainen 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 tietyllä leveydellä ja laskee dynaamisesti näytettävien sarakkeiden määrän asetettujen Breakpoint-objektien perusteella.

Tämä mahdollistaa ColumnsLayout:n mukautuvan sulavasti kapeammasta tilasta pienillä näytöillä laajempaan alueeseen suuremmilla näytöillä, tarjoten responsiivisen suunnittelun kehittäjälle ilman tarvetta mukautettuun toteutukseen.

Ymmärrä Breakpoint​

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

  1. Nimi (valinnainen): Katkaisu-nimittäminen mahdollistaa siihen viittaamisen tulevissa asetuksissa.

  2. Minimi leveys: Jokaisella katkaisulla on erityinen alue, joka määrittää, milloin sen asettelu otetaan käyttöön. Minimi leveys määritellään nimenomaisesti, ja seuraava katkaisu määrittää maksimi leveyden, jos sellainen on. Voit käyttää kokonaislukua määrittämään minimileveyden pikseleinä tai käyttää merkkijonoa määrittämään muita yksikköjä, kuten vw, % tai em.

  3. Sarakemäärä: Määrittele, kuinka monta saraketta katkaisulla tulisi olla tällä kokonaisluvulla.

Breakpoint-arviointi

Katkaisut arvioidaan nousevassa järjestyksessä leveydestä, mikä tarkoittaa, että asettelu käyttää ensimmäistä vastaavaa katkaisua.

Katkaisujen soveltaminen​

Katkaisut sovelletaan ColumnsLayout:iin yhdellä kahdesta tavalla: rakennusvaiheessa tai List-listassa käyttäen setBreakpoints()-metodia:

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);

Esittely alla näyttää esimerkin useiden katkaisujen asettamisesta rakennusvaiheessa, käyttäen katkaisuja määrittämään komponentin Span ja osoittaa ColumnsLayout:n koon muutoskyvyt, kun sovellus koon muuttuessa:

Näytä koodi

Sarakkeen Span ja spans per Breakpoint​

Sarakkeiden spans ColumnsLayout-komponentissa antavat sinulle kontrollin siitä, kuinka monta saraketta kohde vie, mikä antaa enemmän hallintaa asettelun ulkonäköön erilaisilla leveydellä. Tämä on erityisen hyödyllistä, kun sinun on tarvittava tiettyjen elementtien ottaa enemmän tai vähemmän tilaa näyttön koosta tai suunnittelutarpeista riippuen.

Sarakkeiden spans hallinta​

Oletusarvoisesti jokainen kohde ColumnsLayout:ssa vie tarkalleen yhden sarakkeen. Voit kuitenkin mukauttaa tätä käyttäytymistä asettamalla yksittäisten kohteiden sarakkeen spanin. Span määrittelee, kuinka monta saraketta kohde tulisi viedä.

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

Yllä olevassa esimerkissä painike vie kaksi saraketta sen sijaan, että se veisi oletusarvoisesti vain yhden. setSpan()-metodi mahdollistaa sinulle määrittämään, kuinka monta saraketta komponentin tulisi kattaa asettelussa.

Sarakkeiden spans säätäminen katkaisujen mukaan​

Voit myös säätää sarakkeiden spans dynaamisesti katkaisujen mukaan. Tämä ominaisuus on hyödyllinen, kun haluat, että kohde kattaa eri määrän sarakkeita näyttökoon mukaan. Esimerkiksi saatat haluta, että elementti vie yhden sarakkeen mobiililaitteilla 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 katkaisu on aktiivinen
columnsLayout.setSpan(email, "keskikokoinen", 2);
//...

Tämä mukauttamisen taso varmistaa, että asettelusi pysyy responsiivisena ja asianmukaisesti rakenteellisena eri laitteilla.

Kohteiden sijoittaminen sarakkeisiin​

ColumnsLayout tarjoaa mahdollisuuden sijoittaa kohteita tiettyihin sarakkeisiin, mikä antaa enemmän kontrollia elementtien järjestelyyn. Voit manuaalisesti määrittää, mihin kohtaan kohde tulisi ilmestyä asettelussa, varmistaen, että tärkeät komponentit näkyvät halutulla tavalla.

Perussaraket sijoittaminen​

Oletusarvoisesti kohteet sijoitetaan seuraavaan saatavilla olevaan sarakkeeseen, täyttäen vasemmalta oikealle. Voit kuitenkin ylittää tämän käyttäytymisen ja määrittää tarkka sarake, johon kohde tulisi sijoittaa. Kohteen sijoittamiseksi tiettyyn sarakkeeseen käytä setColumn()-metodia. 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äminen katkaisujen mukaan​

Aivan kuten sarakkeiden spansissa, käytät katkaisuja säätääksesi kohteiden sijoittamista näyttökoon mukaan. Tämä on hyödyllistä elementtien järjestyksen tai siirtämisen yhteydessä 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 katkaisu on aktiivinen
columnsLayout.setColumn(email, "keskikokoinen", 2); 
//...

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

Näytä koodi

Vältä törmäyksiä

Kun useita kohteita on sijoitettu asetteluun erilaisilla spans- ja/tai sarakeasetuksilla, varmista, että koottujen spans- ja sijoitusyhdistelmät sarakkeessa eivät mene päällekkäin. Asettelu yrittää hallita väliä automaattisesti, mutta huolellinen suunnittelu spansien ja katkaisujen kanssa estää ei-toivottua esitystä.

Kohteiden pysty- ja vaakakohdistukset​

Jokainen kohde ColumnsLayout:issa voi olla kohdistettu sekä vaakasuunnassa että pystysuunnassa sarakkeessaan, mikä antaa kontrollia siitä, kuinka sisältöä sijoitetaan asettelussa.

Vaakasuuntainen kohdistus kohteelle hallitaan käyttämällä setHorizontalAlignment()-metodia. Tämä ominaisuus määrittää, kuinka kohde kohdistuu sarakkeessaan vaakasuoralla akselilla.

Pystysuuntainen kohdistus määrittää, kuinka kohde jaetaan sarakkeessaan pystysuunnassa. Tämä on hyödyllistä, kun sarakkeilla on vaihtelevat korkeudet ja haluat hallita, kuinka kohteet jakautuvat pystysuunnassa.

Saatavilla olevat Alignment-vaihtoehdot ovat:

  • START: Kohdistaa kohteen sarakkeen vasempaan reunaan (oletus).
  • CENTER: Keskittyy kohde vaakasuunnassa sarakkeessa.
  • END: Kohdistaa kohteen sarakkeen oikeaan reunaan.
  • STRETCH: Venyttää komponentin täyttämään asettelu
  • BASELINE: Kohdistaa tekstin tai sisällön mukaan sarakkeessa, kohdistaa kohteet tekstin perustan mukaan muihin kohdistusvaihtoehtoihin nähden.
  • AUTO: Automaattinen kohdistus.
Näytä koodi

Yllä olevassa esityksessä Lähetä-painikkeelle on asetettu ColumnsLayout.Alignment.END, jotta se ilmestyisi sarakkeensa loppuun tai tässä tapauksessa oikealle.

Kohteiden väli​

Sarakkeiden välin hallitseminen ColumnsLayout:ssa sarakkeiden välillä (vaakaväli) ja rivien välillä (pystyvälit) auttaa kehittäjiä hienosäätämään asettelua.

Asettaaksesi asettelun vaakavälin, käytä setHorizontalSpacing()-metodia:

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

Samalla tavalla käytä setVerticalSpacing()-metodia määrittääksesi välin asettelun rivien välillä:

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

Voit käyttää kokonaislukua määrittämään minimileveyden pikseleinä tai käyttää merkkijonoa määrittämään muita yksiköitä, kuten vw, % tai em.

Vaakasuorat ja pystysuorat asettelut​

Responsiivisten ja houkuttelevien asetteluiden luominen on mahdollista käyttää sekä FlexLayout komponenttia että ColumnsLayout komponenttia, sekä yhdistelmää näistä kahdesta. Alla on esimerkki FlexLayoutissa luodusta muodosta, mutta käyttäen ColumnLayout-kaavaa sen sijaan:

Näytä koodi

Tyylit​

Loading...