Назад к вопросам
Junior
199
questionbank

Какие существуют виды виджетов в Flutter?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

В Flutter виджеты делятся на две основные категории:

  • StatelessWidget: Виджеты, состояние которых не меняется после первоначальной сборки. Они описывают часть UI, которая не зависит от каких-либо данных в рантайме.
  • StatefulWidget: Виджеты с изменяемым состоянием. Они имеют связанный объект State, который содержит изменяемые данные и обеспечивает механизм для перестройки виджета при изменении состояния.

Кроме того, виджеты можно классифицировать по их назначению:

  • Layout виджеты: Управляют расположением других виджетов на экране (например, Row, Column, Stack).
  • Material Components / Cupertino виджеты: Предоставляют готовые UI элементы, соответствующие гайдлайнам Material Design (Android) или Cupertino (iOS) (например, AppBar, Button, TextField).
  • Input виджеты: Позволяют пользователю взаимодействовать с приложением (например, TextField, Checkbox, Slider).
  • Interactive виджеты: Реагируют на пользовательские жесты (например, GestureDetector, InkWell).
  • Painting & Effects виджеты: Применяют графические эффекты (например, Opacity, ClipRRect).
  • Scrolling виджеты: Обеспечивают прокрутку контента (например, ListView, GridView).

По способу создания виджеты могут быть:

  • Примитивные: Базовые строительные блоки (например, Container, Text, Icon).
  • Композитные: Составлены из других виджетов.
// Пример StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // Изменяем состояние и инициируем перерисовку
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Счетчик:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Увеличить',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}
// Пример StatelessWidget
class TitleWidget extends StatelessWidget {
  final String title;

  TitleWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(fontSize: 24),
    );
  }
}