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),
);
}
}