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ésFlexible- a tér rugalmas elosztásáhozRowvagyColumnbelsejében.SingleChildScrollView- a tartalom görgetéséhez, ha az meghaladja a rendelkezésre álló teret.ListViewésGridView- a listák és rácsok megjelenítéséhez alkalmazkodóképességgel.ResponsiveBuilder(aresponsive_frameworkcsomagbó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,
),
),
],
);
}
}