Siirry pääsisältöön

ColumnsLayout

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

ColumnsLayout -komponentti webforJ:ssä mahdollistaa kehittäjille joustavien ja responsiivisten pystylayoutien luomisen. Tämä layout tarjoaa dynaamiset sarakkeet, jotka mukautuvat käytettävissä olevan leveyden mukaan. Tämä komponentti yksinkertaistaa monisarakkeisten layoutien luontia hallitsemalla automaattisesti katkeamispisteet ja tasausasetukset.

Vaakasuorat layoutit

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

Perusteet​

Kun ColumnsLayout on ensimmäisen kerran instanssoitu, se käyttää kahta saraketta näyttääkseen layoutiin lisätyt kohteet. Oletuksena se vie koko laajuuden vanhempien elementtien sisällä ja kasvaa tarvittaessa lisäsisällön mahtumiseksi. Lisättyjen kohteiden näyttöä voidaan hienosäätää edelleen käyttämällä Breakpoint ja Alignment asetuksia, joita käsitellään yksityiskohtaisesti seuraavissa osioissa.

Näytä Koodi

Katkeamispisteet​

ColumnsLayout on suunniteltu tarjoamaan joustava, ruudukkomallinen järjestelmä, joka mukautuu vanhemman säilön leveyteen. Toisin kuin perinteiset kiinteät ruudukkojärjestelmät, tämä layout mahdollistaa kehittäjien määrittää tietyn määrän sarakkeita tietyllä leveydellä ja laskee dynaamisesti näytettävien sarakkeiden määrän asetettujen Breakpoint-objektien mukaan.

Tämä mahdollistaa ColumnsLayout:in sujuvan mukautumisen kapeammasta tilasta pienillä näytöillä laajemmalle alueelle suuremmilla näytöillä, tarjoten responsiivisen suunnittelun kehittäjälle ilman tarvetta erityiselle toteutukselle.

Ymmärtäminen Breakpoint​

Breakpoint voidaan määrittää käyttämällä Breakpoint-luokkaa, johon liittyy kolme parametria:

  1. Nimi (valinnainen): Katkeamispisteen nimeäminen mahdollistaa sen viittaamisen tulevissa asetuksissa.

  2. Minimileveys: Jokaisella katkeamispisteellä on tietty alue, joka määrittää, milloin sen layoutia sovelletaan. Minimileveys määritellään tarkasti, ja seuraava katkeamispiste määrittää maksimi leveyden, jos sellainen on olemassa. Voit käyttää kokonaislukua minimoidaksesi leveyden pikseleinä tai käyttää merkkijonoa määrittääksesi muita yksiköitä, kuten vw, % tai em.

  3. Sarakemäärä: Määritä, kuinka monta saraketta katkeamispisteessä tulisi olla tämän kokonaisluvun avulla.

Breakpoint-arviointi

Katkeamispisteet arvioidaan nousevassa järjestyksessä leveyden mukaan, mikä tarkoittaa, että layout käyttää ensimmäistä vastaavaa katkeamispistettä.

Katkeamispisteiden soveltaminen​

Katkeamispisteet voidaan soveltaa ColumnsLayout:iin kahdella tavalla: rakentamisen aikana tai käyttämällä addBreakpoint(Breakpoint) -menetelmää, kuten alla on esitetty.

ColumnsLayout layout = new ColumnsLayout()
    // Yksi sarake leveydellä >= 0px
    .addBreakpoint(new Breakpoint(0, 1))
    // Kaksi saraketta leveydellä >= 600px
    .addBreakpoint(new Breakpoint(600, 2))
    // Neljä saraketta leveydellä >= 1200px
    .addBreakpoint(new Breakpoint(1200, 4));

Alla oleva esimerkki näyttää useiden katkeamispisteiden asettamisen rakentamisen aikana, käyttämällä katkeamispisteitä komponentin Span määrittelyyn, ja näyttää ColumnsLayout:n koon muutoksen, kun sovellusta muutetaan:

Näytä Koodi

Sarakkeen Span ja spans per Breakpoint​

Sarakkeiden spaneja ColumnsLayout:issa voidaan käyttää hallitsemaan, kuinka monta saraketta kohde vie, antaen sinulle enemmän hallintaa layoutin ulkoasusta eri leveysasioissa. Tämä on erityisen hyödyllistä, kun haluat tiettyjen elementtien vievän enemmän tai vähemmän tilaa näytön koosta tai suunnitteluvaatimuksista riippuen.

Sarake-spanien hallinta​

Oletuksena jokainen kohde ColumnsLayout:issa vie tarkalleen yhden sarakkeen. Tämä käyttäytyminen voidaan kuitenkin mukauttaa asettamalla yksittäisten kohteiden sarakkeiden spanit. Span määrittää, kuinka monta saraketta kohde tulisi ottaa.

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

Yllä olevassa esimerkissä painike vie kaksi saraketta, eikä vain oletuksena yhtä. setSpan()-menetelmä antaa sinun määrittää, kuinka monta saraketta komponentin tulisi kattaa layoutissa.

Sarakkeen spanien säätäminen katkeamispisteiden kanssa​

Voit myös säätää sarakkeen spanien dynaamisesti katkeamispisteiden mukaan. Tämä ominaisuus on hyödyllinen, kun haluat kohteen spanin olevan erilaisista sarakkeista riippuvainen näytön koosta. Esimerkiksi saatat haluta elementin vievän yhden sarakkeen mobiililaitteilla, mutta spanavan useita sarakkeita suuremmilla näytöillä.

TextField email = new TextField("Sähköposti");
//...
List.of(
  new ColumnsLayout.Breakpoint("default", 0 , 1),
  new ColumnsLayout.Breakpoint("small", "20em", 1),
  new ColumnsLayout.Breakpoint("medium", "40em", 2),
  new ColumnsLayout.Breakpoint("large", "60em", 3)
)
//...
//email-kenttä vie kaksi saraketta, kun keskeinen katkeamispiste on aktiivinen
columnsLayout.setSpan(email, "medium", 2);
//...

Tämä mukautustaso varmistaa, että layoutisi pysyy responsiivisena ja rakenteeltaan asianmukaisena eri laitteilla.

Kohteiden sijoittaminen sarakkeisiin​

ColumnsLayout tarjoaa mahdollisuuden sijoittaa kohteita tiettyihin sarakkeisiin, antaen enemmän hallintaa elementtien järjestelyyn. Voit manuaalisesti määrittää, missä kohteen tulisi näkyä layoutissa varmistaen, että tärkeät komponentit näkyvät haluamallasi tavalla.

Perussarakasijoittaminen​

Oletuksena kohteet sijoitetaan seuraavaan saatavilla olevaan sarakkeeseen täyttäen vasemmalta oikealle. Voit kuitenkin ohittaa tämän käyttäytymisen ja määrittää tarkalleen, mihin sarakkeeseen kohde tulisi sijoittaa. Kohteen sijoittamiseksi tietyyn sarakkeeseen käytä setColumn()-menetelmää. Tässä esimerkissä painike sijoitetaan layoutin toiseen sarakkeeseen, riippumatta siitä, missä järjestyksessä se lisättiin suhteessa muihin komponentteihin:

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

Sijoittamisen säätäminen katkeamispisteiden mukaan​

Aivan kuten sarakkeen spanien kanssa, voit käyttää katkeamispisteitä säätämään kohteiden sijoittelua näytön koon mukaan. Tämä on hyödyllistä elementtien järjestyksen tai paikkaamisen muuttamiseksi layoutissa näkymän muuttuessa.

TextField email = new TextField("Sähköposti");
//...
List.of(
  new ColumnsLayout.Breakpoint("default", 0 , 1),
  new ColumnsLayout.Breakpoint("small", "20em", 1),
  new ColumnsLayout.Breakpoint("medium", "40em", 2),
  new ColumnsLayout.Breakpoint("large", "60em", 3)
)
//...
//email-kenttä näkyy toisessa sarakkeessa, kun keskeinen katkeamispiste on aktiivinen
columnsLayout.setColumn(email, "medium", 2); 
//...

Seuraavassa demonstraatiossa huomaa, että kun "medium" katkeamispiste aktivoituu, email-kenttä vie molemmat sarakkeet, ja confirmPassword-kenttä sijoitetaan ensimmäiseen sarakkeeseen, eikä sen oletuspaikkaan toiseen sarakkeeseen:

Näytä Koodi

Vältä törmäyksiä

Kun useita kohteita sijoitetaan layoutiin erilaisilla spanilla ja/tai sarakeasetuksilla, varmista, että kohteiden yhteenlasketut spanit ja sijoitukset rivillä eivät päällekkäin. Layout yrittää hallita välistä tilaa automaattisesti, mutta huolellinen suunnittelu spaneista ja katkeamispisteistä estää tahattoman kohteiden näyttämisen.

Vertikaaliset ja horisontaaliset kohteen tasaus​

Jokainen kohde ColumnsLayout:issa voidaan tasaamaan sekä vaakasuunnassa että pystysuunnassa sarakkeensa sisällä, mikä antaa hallinnan siitä, miten sisältö sijoitetaan layoutin sisällä.

Vaakasuuntainen tasaus kohteelle hallitaan käyttämällä setHorizontalAlignment()-menetelmää. Tämä ominaisuus määrää, miten kohde on kohdistettu sarakkeensa sisällä vaakasuoralla akselilla.

Pystysuuntainen tasaus määrittää, kuinka kohde sijoitetaan sarakkeensa sisällä pystysuoralla akselilla. Tämä on hyödyllistä, kun sarakkeilla on vaihteleva korkeus ja haluat hallita, miten kohteet jakautuvat pystysuunnassa.

Saatavilla olevat Alignment-vaihtoehdot sisältävät:

  • START: Kohdistaa kohteen sarakkeen vasempaan laitaan (oletus).
  • CENTER: Keskittää kohteen vaakasuunnassa sarakkeessa.
  • END: Kohdistaa kohteen sarakkeen oikeaan laitaan.
  • STRETCH: Venyttää komponentin täyttämään layoutin.
  • BASELINE: Kohdistaa perustuen sarakkeessa olevaan tekstiin tai sisältöön, kohdistamalla kohteet tekstin alalaitaan muista tasausvaihtoehdoista poiketen.
  • AUTO: Automaattinen tasaus.
Näytä Koodi

Yllä olevassa esittelyssä Lähetä-painikkeelle on annettu ColumnsLayout.Alignment.END, jotta se näkyy sarakkeensa päässä, tai tässä tapauksessa oikealla.

Kohteiden väli​

Sarakkeiden välin hallinta ColumnsLayout:issa sarakkeiden (vaakaväli) ja rivien (pystyvli) välillä auttaa kehittäjiä hienosäätämään layoutia.

Aseta layoutin vaakaväli käyttämällä setHorizontalSpacing()-menetelmää:

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

Samaan tapaan käytä setVerticalSpacing()-menetelmää määrittääksesi välin rivien välillä layoutissa:

// 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ääksesi muita yksiköitä, kuten vw, % tai em.

Vaakasuorat ja pystysuorat layoutit​

Responsiivisten ja houkuttelevien layoutien rakentaminen on mahdollista sekä FlexLayout -komponentilla että ColumnsLayout -komponentilla, sekä näiden yhdistelmällä. Alla on esimerkki FlexLayout artikkelissa luodusta lomakkeesta, mutta käyttäen ColumnLayout-järjestelmää:

Näytä Koodi

Tyylittely​

Loading...