MediaQuery — mi ez, működési elv és adaptív elrendezések

Mi a MediaQuery

MediaQuery — egy widget és osztály a Flutter-ben, amely adatokat szolgáltat az alkalmazás média környezetéről. A MediaQuery az egész alkalmazást a MaterialApp vagy CupertinoApp gyökér widgetbe csomagolja, és bármely gyermek widget elérheti ezeket az adatokat a MediaQuery.of(context) segítségével.

Amikor a Flutter elindítja az alkalmazást, létrehoz egy MediaQueryData példányt, amely az aktuális eszköz összes mérőszámát tartalmazza. Ezek az adatok automatikusan frissülnek változások esetén: eszköz elforgatása, ablakméret változása (asztali gépen), billentyűzet megjelenése vagy a rendszer akadálymentesítési beállításainak változása. A MediaQuery minden adatváltozáskor újraépíti a widgetek részgráfját, biztosítva a felület reaktív alkalmazkodását.

A MediaQueryData a következőket tartalmazza: size (képernyőméret), devicePixelRatio (pixelsűrűség), textScaleFactor (betűméret skála a rendszerbeállításokból), viewInsets (billentyűzet által takart terület), viewPadding (rendszermargók), orientation (tájolás) és platformBrightness (világos vagy sötét téma).

Következtetés: MediaQuery — az eszközinformáció központi forrása a Flutter-ben. A MediaQuery.of(context) elérése az első lépés bármely adaptív felület építésében.

A MediaQueryData fő tulajdonságai

MediaQueryData több tucat tulajdonságot tartalmaz, de a leggyakrabban használtak azok, amelyek az elrendezés építését befolyásolják. Tekintsük át a legfontosabbakat.

Size — képernyőméret

MediaQuery.of(context).size egy Size objektumot ad vissza a képernyő szélességével és magasságával logikai pixelekben (device-independent pixels, dip). Ezek az értékek nem veszik figyelembe a rendszermargókat. Az adaptív elrendezések számításához a size az elsődleges mérőszám: alapján határozzák meg a breakpoints-okat mobil, tablet és asztali elrendezésekhez.

ViewPadding — rendszermargók

ViewPadding — margók, amelyeket a rendszer foglal le az állapotsor, notch (képernyő kivágás), rendszernavigációs panel és home indikátor (iOS-en) számára. E margók figyelembevétele nélkül a tartalom a rendszerelemek alá kerülhet. A MediaQuery.of(context).padding EdgeInsets-t ad vissza, amelyet padding-ként kell alkalmazni az oldal gyökér konténerére.

ViewInsets — billentyűzet terület

ViewInsets — a képernyő területe, amelyet a szoftveres billentyűzet takar. Bemeneti mezők esetén kritikus a viewInsets.bottom figyelése, hogy a tartalmat a billentyűzet fölé emeljük. A Flutter ezt automatikusan kezeli a scaffold-ban, de egyéni elrendezésekhez közvetlenül a MediaQuery.of(context).viewInsets használandó.

Orientation — eszköz tájolása

Orientation — álló (portrait) vagy fekvő (landscape) tájolás. A szélesség és magasság összehasonlításával határozható meg: ha a szélesség kisebb, mint a magasság — portrait, egyébként — landscape. Termelési kódban a tájolást az elemek függőleges és vízszintes elrendezése közötti váltáshoz használják.

Következtetés: négy fő tulajdonság — size, viewPadding, viewInsets és orientation — lefedi az adaptív tervezési feladatok 90%-át. A többi tulajdonság (textScaleFactor, platformBrightness, devicePixelRatio) specifikus forgatókönyvekhez használatos.

A MediaQuery használata adaptív elrendezésekhez

MediaQuery — az adaptív tervezés alapja a Flutter-ben. Segítségével breakpoints-ok határozhatók meg, az elrendezés a képernyő méretétől függően változik, és a margók különböző eszközökhöz igazíthatók.

Tipikus forgatókönyv: a mobilalkalmazásnak terméklistát kell megjelenítenie. Telefonon (szélesség < 600dp) — egy oszlop. Tableten (szélesség 600–900dp) — két oszlop. Asztali gépen (szélesség > 900dp) — három oszlop. A MediaQuery.of(context).size.width lehetővé teszi az oszlopok számának dinamikus kiválasztását külön képernyő nélkül minden form faktorhoz.

Második forgatókönyv: a system gesture insets figyelembevétele modern eszközökön. Dynamic Island-del rendelkező iPhone-on vagy gesture navigation-t használó Androidon a rendszermargók a képernyő egy részét foglalják el. A MediaQuery.of(context).padding minden eszköztípushoz megfelelő értékeket ad vissza, és a Scaffold ezeket automatikusan alkalmazza a body-n keresztül. Egyéni widgetek esetén a padding-ot explicit módon kell átadni a MediaQuery-ből.

Harmadik forgatókönyv: alkalmazkodás a rendszer akadálymentesítési beállításaihoz. A MediaQuery.of(context).textScaleFactor mutatja, hogy a felhasználó mennyivel növelte meg a betűméretet a beállításokban. textScaleFactor > 1.3 esetén az elrendezés elromolhat — a hosszú szövegek kilépnek a kártyák határain. Az adaptív elrendezéseknek ezt figyelembe kell venniük, és szükség esetén egyszerűbb elrendezésre kell váltaniuk.

Következtetés: MediaQuery — nem csak mérőszámok forrása, hanem eszköz a valóban adaptív felületek építéséhez. Használja breakpoints-okhoz, safe area-hoz és az akadálymentesítés figyelembevételéhez.

Kódpéldák MediaQuery-vel

1. példa a képernyőméret lekérését és a breakpoints-ok alkalmazását mutatja az oszlopok számának kiválasztásához.

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

A fenti példa egy függvényt mutat az oszlopok számának kiválasztásához a képernyő szélessége alapján. A 600 és 900 breakpoints-ok megfelelnek a Material Design általánosan elfogadott szabványainak telefonokhoz, tabletekhez és asztali gépekhez.

2. példa — a MediaQuery használata viewPadding-del a tartalom helyes elhelyezéséhez a rendszermargók figyelembevételével.

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

Ebben a példában a padding a tartalmat Padding-be csomagolja, rendszermargókat használva. A top figyelembe veszi az állapotsort és a notch-ot, a left/right — a biztonságos zónákat. A bottom nincs benne, mert a Scaffold általában maga kezeli az alsó navigációt.

3. példa — a tájolás meghatározása és az elemek elrendezésének módosítása.

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

Portrait módban az elemek függőlegesen (Column), landscape-ben vízszintesen (Row) helyezkednek el. Ez a megközelítés biztosítja a legjobb helykihasználást az eszköz elforgatásakor.

Következtetés: MediaQuery — a fő eszköz adaptív elrendezések építéséhez. Flutter felületek fejlesztésekor mindig vegye figyelembe a rendszermargókat, breakpoints-okat és a tájolást.

Gyakori hibák a MediaQuery használatakor

1. hiba: MediaQuery.of(context) hívása a MediaQuery kontextusán kívül. Ha a widget a MediaQuery felett van a fában, a hívás futásidejű hibához vezet. Megoldás: mindig a MaterialApp vagy CupertinoApp által csomagolt widgeteken belül hívja a MediaQuery.of(context)-et, ahol a MediaQuery gyökér widgetként van beállítva.

2. hiba: a safe area elfelejtése. A fejlesztők a MediaQuery.size-t használják elemek elhelyezésére a rendszermargók figyelembevétele nélkül. A notch-csel vagy gesture navigation-nel rendelkező eszközökön a tartalom az állapotsor alá kerül. Megoldás: vonja ki a MediaQuery.of(context).padding-et a pozícionálási koordinátákból.

3. hiba: merev kötődés a méretekhez. A MediaQuery.of(context).size.width használata az elemek pontos méretének meghatározásához (width: size.width * 0.3) csak egy form faktorú eszközökön működik. Asztali gépen vagy tableten az elrendezés természetellenesnek tűnik. Megoldás: használjon breakpoints-okat Expanded és Flexible kombinációval a rugalmas elrendezéshez, nem merev százalékokat.

4. hiba: a textScaleFactor figyelmen kívül hagyása. Amikor a felhasználó növeli a rendszer betűméretét, a felület elromolhat — a szövegek kilépnek a konténerek határain. Megoldás: ellenőrizze a MediaQuery.of(context).textScaleFactor-t, és 1.3 feletti értékeknél váltson egyszerűbb, görgethető elrendezésre.

Következtetés: MediaQuery — hatékony, de finom eszköz. Vegye figyelembe a rendszermargókat, tájolást és akadálymentesítési beállításokat, hogy a felület minden eszközön helyesen jelenjen meg.