Middle
Flutterдеги кайсы widgetтер адаптивдүү түзүмдү камсыздайт?
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,
),
),
],
);
}
}