| Herbruikbare componenten zijn de vitale aspecten van de Dart-programmeertaal waarop Flutter is gebaseerd. Dart en Flutter worden beide sterk beïnvloed door de objectgeoriënteerde programmeerprincipes.
Met de herbruikbare componenten kunnen we eenvoudig een widget definiëren en er een andere widget in insluiten, zoals een ouder-kindrelatie. Door dit te doen, kunnen we de gemeenschappelijke eigenschappen gemakkelijk delen met een groep widgets en de leesbaarheid van de UI-codebasis behouden.
Laten we een eenvoudig voorbeeld hebben om dit concept beter te begrijpen. Stel dat u een aangepaste knopcomponent wilt maken die in elk deel van uw Flutter-toepassing kan worden hergebruikt.
Voor dit doel definiëren we een nieuwe klasse die de klasse `StatefulWidget` uitbreidt. Hieronder vindt u het codefragment van de widget `CustomButton`.
``` pijltje
importeer 'pakket:flutter/materiaal.dart';
klasse CustomButton breidt StatefulWidget uit {
laatste String-tekst;
uiteindelijke kleurkleur;
laatste ongeldig Terugbellen bij indrukken;
const CustomButton(
{vereist deze.tekst, vereist deze.kleur, vereist dit.onPressed});
@overschrijven
State createState() => _CustomButtonState();
}
class _CustomButtonState breidt State uit
@overschrijven
Widget bouwen(BuildContext-context) {
return VerhoogdeKnop(
onPressed:widget.onPressed,
stijl:ElevatedButton.styleFrom(
primair:widget.color,
),
kind:Tekst(widget.text),
);
}
}
```
Laten we nu eens kijken hoe we deze `CustomButton` kunnen gebruiken. Stel dat we een klasse `MyApp` hebben die de klasse `StatelessWidget` uitbreidt. We hoeven alleen maar een exemplaar van de `CustomButton` Widget te maken en de vereiste parameters door te geven.
``` pijltje
importeer 'pakket:flutter/materiaal.dart';
importeer 'pakket:flutter_training_app/CustomButton.dart';
class MyApp breidt StatelessWidget uit {
const MijnApp({Sleutel? sleutel}):super(sleutel:sleutel);
@overschrijven
Widget bouwen(BuildContext-context) {
retourneer MateriaalApp(
thuis:Steiger(
appBar:AppBar(
titel:Tekst('Mijn app'),
),
lichaam:Midden(
kind:CustomButton(
tekst:'Klik op mij',
kleur:Colors.blauw,
opgedrukt:() {
// Doe hier iets.
},
),
),
),
);
}
}
```
Dat is alles! We hebben met succes een herbruikbaar onderdeel gemaakt en gebruikt met behulp van de samenstelling van de widget. Met behulp van deze techniek kunnen we de herbruikbaarheid en onderhoudbaarheid van de code van onze Flutter UI verbeteren. |
