Sobes.tech
Junior

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

sobes.tech AI

Отговор от 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),
    );
  }
}