Genanvendelige komponenter er de vitale aspekter af Dart-programmeringssproget, som Flutter er baseret på. Dart og Flutter er begge stærkt påvirket af de objektorienterede programmeringsprincipper.
Med de genanvendelige komponenter kan vi simpelthen definere en widget og indlejre en anden widget i den som et forældre-børn-forhold. Ved at gøre det kan vi nemt dele de fælles egenskaber blandt en gruppe widgets og bevare læsbarheden af UI-kodebasen.
Lad os få et simpelt eksempel for at forstå dette koncept bedre. Antag, at du vil oprette en brugerdefineret knapkomponent, der kan genbruges i enhver del af din Flutter-applikation.
Til dette formål definerer vi en ny klasse, der udvider klassen `StatefulWidget`. Nedenfor er kodestykket til `CustomButton`-widgetten.
``` dart
import 'package:flutter/material.dart';
klasse CustomButton udvider StatefulWidget {
endelig strengtekst;
endelige farve farve;
endelig VoidCallback onPressed;
const CustomButton(
{required this.text, required this.color, required this.onPressed});
@override
State createState() => _CustomButtonState();
}
klasse _CustomButtonState udvider tilstand {
@override
Widget build(BuildContext kontekst) {
return Elevated Button(
onPressed:widget.onPressed,
stil:ElevatedButton.styleFrom(
primær:widget.color,
),
barn:Text(widget.text),
);
}
}
```
Lad os nu se, hvordan du bruger denne `CustomButton`. Antag, at vi har en 'MyApp'-klasse, der udvider klassen 'StatelessWidget'. Vi skal simpelthen oprette en instans af `CustomButton`-widgetten og videregive de nødvendige parametre.
``` dart
import 'package:flutter/material.dart';
import 'package:flutter_training_app/CustomButton.dart';
klasse MyApp udvider StatelessWidget {
const MyApp({Nøgle? nøgle}):super(nøgle:nøgle);
@override
Widget build(BuildContext kontekst) {
returner MaterialApp(
hjem:Stillads(
appBar:AppBar(
title:Text('Min app'),
),
krop:Center(
barn:CustomButton(
tekst:'Klik på mig',
farve:Farver.blå,
onPressed:() {
// Gør noget her.
},
),
),
),
);
}
}
```
Det er det! Vi har med succes oprettet og brugt en genanvendelig komponent ved hjælp af widgetens sammensætning. Ved at bruge denne teknik kan vi forbedre kodens genbrugbarhed og vedligeholdelse af vores Flutter UI.
