Sobes.tech
Junior

Jaké druhy widgetů existují ve Flutteru?

sobes.tech AI

Odpověď od AI

Ve Flutteru jsou widgety rozděleny do dvou hlavních kategorií:

  • StatelessWidget: Widgety, jejichž stav se po počáteční sestavě nemění. Popisují část uživatelského rozhraní, která nezávisí na datech za běhu.
  • StatefulWidget: Widgety s měnitelným stavem. Mají přiřazený objekt State, který obsahuje měnitelné údaje a poskytuje mechanismus pro překreslení widgetu při změně stavu.

Kromě toho lze widgety třídit podle jejich účelu:

  • Rozvržení widgetů: Řídí rozmístění ostatních widgetů na obrazovce (například Row, Column, Stack).
  • Material Components / Cupertino widgety: Poskytují hotové UI prvky odpovídající směrnicím Material Design (Android) nebo Cupertino (iOS) (například AppBar, Button, TextField).
  • Vstupní widgety: Umožňují uživateli interagovat s aplikací (například TextField, Checkbox, Slider).
  • Interaktivní widgety: Reagují na gesta uživatele (například GestureDetector, InkWell).
  • Malování a efekty widgetů: Používají grafické efekty (například Opacity, ClipRRect).
  • Posuvné widgety: Zajišťují posuv obsahu (například ListView, GridView).

Podle způsobu tvorby mohou být widgety:

  • Primitivní: Základní stavební bloky (například Container, Text, Icon).
  • Složené: Sestavené z jiných widgetů.
// Příklad StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      // Změna stavu a překreslení
      _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ýšit',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}
// Pří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),
    );
  }
}