Middle
Кои widgets във Flutter осигуряват адаптивна подредба?
sobes.tech AI
Отговор от AI
MediaQuery- за получаване на информация за размера и ориентацията на екрана.LayoutBuilder- за изграждане на виджети в зависимост от ограниченията на родителския елемент.OrientationBuilder- за изграждане на виджети в зависимост от ориентацията на екрана.FractionallySizedBox- за създаване на елементи с размер, пропорционален на наличното пространство.AspectRatio- за поддържане на зададено съотношение на страните на елемента.ExpandedиFlexible- за гъвкаво разпределение на пространството между елементите вRowилиColumn.SingleChildScrollView- за превъртане на съдържанието, ако то превишава наличната област.ListViewиGridView- за показване на списъци и мрежи с възможност за адаптация.ResponsiveBuilder(от пакетаresponsive_framework) - за изграждане на виджети в зависимост от брейкпойнтите.FittedBox- за мащабиране на дъщерния виджет съобразно размера на родителя.
// Пример за използване на 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,
),
),
],
);
}
}