Sobes.tech
Junior

Aký druh widgetov existuje vo Flutteri?

sobes.tech AI

Odpoveď od AI

Vo Flutteri sú widgety rozdelené do dvoch hlavných kategórií:

  • StatelessWidget: Widgety, ktorých stav sa nemení po počiatočnej zostavbe. Opisujú časť UI, ktorá nezávisí od údajov v reálnom čase.
  • StatefulWidget: Widgety so zmeniteľným stavom. Majú pripojený objekt State, ktorý obsahuje meniteľné údaje a zabezpečuje mechanizmus na opätovnú výstavbu widgetu pri zmene stavu.

Okrem toho, widgety možno klasifikovať podľa ich určenia:

  • Layout widgety: Riadi rozloženie iných widgetov na obrazovke (napríklad Row, Column, Stack).
  • Material Components / Cupertino widgety: Poskytujú hotové UI prvky zodpovedajúce smerniciam Material Design (Android) alebo Cupertino (iOS) (napríklad AppBar, Button, TextField).
  • Input widgety: Umožňujú používateľovi interagovať s aplikáciou (napríklad TextField, Checkbox, Slider).
  • Interactive widgety: Reagujú na gestá používateľa (napríklad GestureDetector, InkWell).
  • Painting & Effects widgety: Aplikujú grafické efekty (napríklad Opacity, ClipRRect).
  • Scrolling widgety: Zabezpečujú posúvanie obsahu (napríklad ListView, GridView).

Podľa spôsobu vytvárania môžu byť:

  • Primitívne: Základné stavebné bloky (napríklad Container, Text, Icon).
  • Kombinované: Skladajú sa z iných widgetov.
// Príklad StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      // Meniť stav a spustiť opätovné vykreslenie
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Počítadlo:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Zväčšiť',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}
// Príklad StatelessWidget
class TitleWidget extends StatelessWidget {
  final String title;

  TitleWidget({required this.title});

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