Sobes.tech
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,
          ),
        ),
      ],
    );
  }
}