Sobes.tech
Middle

Mely widgetek biztosítanak alkalmazkodó felületet Flutterben?

sobes.tech MI

Válasz az MI-től

  • MediaQuery - az információk megszerzéséhez a képernyő méretéről és tájolásáról.
  • LayoutBuilder - a widgetek építéséhez a szülő korlátozásai alapján.
  • OrientationBuilder - a widgetek építéséhez a képernyő tájolása szerint.
  • FractionallySizedBox - elemek létrehozásához, amelyek mérete arányos a rendelkezésre álló térrel.
  • AspectRatio - az elem adott oldalarányának fenntartásához.
  • Expanded és Flexible - a tér rugalmas elosztásához Row vagy Column belsejében.
  • SingleChildScrollView - a tartalom görgetéséhez, ha az meghaladja a rendelkezésre álló teret.
  • ListView és GridView - a listák és rácsok megjelenítéséhez alkalmazkodóképességgel.
  • ResponsiveBuilder (a responsive_framework csomagból) - widgetek építéséhez a töréspontok szerint.
  • FittedBox - a gyermek widget méretezéséhez a szülő méretéhez igazítva.
// MediaQuery használatának példája
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Alkalmazkodó tervezés'),
      ),
      body: Center(
        child: Text('Képernyő mérete: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
      ),
    );
  }
}
// LayoutBuilder példája
class AdaptiveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          // Széles képernyő
          return Container(
            color: Colors.blue,
            width: 300,
            height: 100,
            child: Center(child: Text('Széles')),
          );
        } else {
          // Keskeny képernyő
          return Container(
            color: Colors.red,
            width: 100,
            height: 50,
            child: Center(child: Text('Keskeny')),
          );
        }
      },
    );
  }
}
// Expanded példája
class FlexibleLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          width: 50,
          height: 50,
        ),
        Expanded( // a fennmaradó helyet foglalja el
          child: Container(
            color: Colors.green,
            height: 50,
          ),
        ),
      ],
    );
  }
}