J'ai besoin de votre aide. Je suis nouveau pour flotter et j'écris ma première application. Je voudrais insérer des objets de l'espace entre les espaces (images, mais aussi longtemps que je ne les ai pas conçues, j'utilise un espace réservé) et de les centrer. Voici quelques captures d'écran, vous pouvez donc imaginer ce que je Meen:
p>
et voici mon code (seul corps): p>
body:
Container(
child: Center(
child: Column(
children: <Widget> [
Row(
children: <Widget> [
Placeholder(
color: Colors.deepOrange,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.indigo,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.pink[200],
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
],
),
Row(
children: <Widget> [
Placeholder(
color: Colors.black,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.blueGrey[300],
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.red,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
],
),
Row(
children: <Widget> [
Placeholder(
color: Colors.blueGrey[300],
strokeWidth: 3.5,
fallbackWidth: 225.0,
fallbackHeight: 75.0,
),
],
),
],
),
),
),
4 Réponses :
Vous pouvez obtenir la mise en page souhaitée en ajoutant le: ici Vous pouvez en lire plus sur aligner les widgets flottants. P> Code complet: p> MAINAXISALIGIGNEMENT: MAINAXISALIGNEMENT.SPACEVERCLY, CODE> Propriété de votre Colonne CODE>, ainsi que sur le premier aux lignes. En outre, la dernière ligne doit être centrée en définissant le principal (code> MAINAXISAlignment.center, Code> Propriété. Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Placeholder(
color: Colors.deepOrange,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.indigo,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.pink[200],
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Placeholder(
color: Colors.black,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.blueGrey[300],
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
Placeholder(
color: Colors.red,
strokeWidth: 3.5,
fallbackWidth: 75.0,
fallbackHeight: 75.0,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Placeholder(
color: Colors.blueGrey[300],
strokeWidth: 3.5,
fallbackWidth: 225.0,
fallbackHeight: 75.0,
),
],
),
],
),
),
)
Vous devrez probablement implémenter une grille de grille pour atteindre cet interface utilisateur.
body: Column(
children: <Widget>[
Flexible(
child: Padding(
padding: const EdgeInsets.only(top: 16.0, bottom: 32.0),
child: GridView.count(
padding: const EdgeInsets.all(20),
/// This sets the horizontal space between each cell
crossAxisSpacing: 10,
/// This sets the vertical space between each cell
mainAxisSpacing: 30,
crossAxisCount: 3,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
),
),
),
Flexible(
child: Container(
/// I used MediaQuery to set the width of the Container to 90% of the device screen
width: MediaQuery.of(context).size.width * 0.90,
height: 80.0,
color: Colors.purple,
),
),
],
),
Je suggérerais d'utiliser le constructeur gridview.count pour créer cette mise en page: https://api.flutter.dev/flutter/widgets/gridview-class.html