Middle
Kokie widget'ai Flutter užtikrina prisitaikantį išdėstymą?
sobes.tech AI
Atsakymas iš AI
MediaQuery- norint gauti informacijos apie ekrano dydį ir orientaciją.LayoutBuilder- kuriant widget'us priklausomai nuo tėvo elemento apribojimų.OrientationBuilder- kuriant widget'us priklausomai nuo ekrano orientacijos.FractionallySizedBox- kuriant elementus, kurių dydis proporcingas prieinamai erdvei.AspectRatio- palaikant nustatytą pločio ir aukščio santykį.ExpandedirFlexible- lankstus erdvės paskirstymas tarp elementųRowarColumnviduje.SingleChildScrollView- turinio nuskaitymas, jei jis viršija prieinamą plotą.ListViewirGridView- sąrašų ir tinklų rodymas su prisitaikymo galimybėmis.ResponsiveBuilder(išresponsive_frameworkpaketo) - widget'ų kūrimas priklausomai nuo breakpoints.FittedBox- vaikų widget'o mastelio keitimas pagal tėvo dydį.
// MediaQuery naudojimo pavyzdys
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Adaptuojamas dizainas'),
),
body: Center(
child: Text('Ekrano dydis: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// LayoutBuilder naudojimo pavyzdys
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Platus ekranas
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Platus')),
);
} else {
// Siauras ekranas
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Siauras')),
);
}
},
);
}
}
// Expanded naudojimo pavyzdys
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // užims likusią erdvę
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}