Middle
Ποια widgets στο Flutter παρέχουν ευέλικτη διάταξη;
sobes.tech AI
Απάντηση από AI
MediaQuery- για την απόκτηση πληροφοριών σχετικά με το μέγεθος και την προσανατολισμό της οθόνης.LayoutBuilder- για την κατασκευή widget βάσει των περιορισμών του γονικού στοιχείου.OrientationBuilder- για την κατασκευή widget βάσει της προσανατολισμού της οθόνης.FractionallySizedBox- για τη δημιουργία στοιχείων με μέγεθος αναλογικό του διαθέσιμου χώρου.AspectRatio- για τη διατήρηση μιας συγκεκριμένης αναλογίας διαστάσεων του στοιχείου.ExpandedκαιFlexible- για την ευέλικτη κατανομή χώρου μεταξύ των στοιχείων σεRowήColumn.SingleChildScrollView- για την κύλιση περιεχομένου εάν υπερβαίνει την διαθέσιμη περιοχή.ListViewκαιGridView- για την εμφάνιση λιστών και πλέγματος με δυνατότητα προσαρμογής.ResponsiveBuilder(από το πακέτοresponsive_framework) - για την κατασκευή widget βάσει των σημείων διακοπής.FittedBox- για την κλιμάκωση του παιδικού widget σύμφωνα με το μέγεθος του γονέα.
// Παράδειγμα χρήσης του MediaQuery
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Ανταποκρινόμενος σχεδιασμός'),
),
body: Center(
child: Text('Μέγεθος οθόνης: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// Παράδειγμα χρήσης του LayoutBuilder
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Ευρεία οθόνη
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Ευρεία')),
);
} else {
// Στενή οθόνη
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Στενή')),
);
}
},
);
}
}
// Παράδειγμα χρήσης του Expanded
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // θα καταλάβει τον υπόλοιπο χώρο
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}