Πώς να προσθέσετε χώρο μεταξύ στοιχείων σειράς στο Flutter

Μία από τις πτυχές του Flutter που αγαπώ απόλυτα είναι η ευελιξία του στη σχεδίαση διάταξης. Όταν πρόκειται για την τακτοποίηση στοιχείων στη σειρά, το Flutter προσφέρει ισχυρές επιλογές για τον έλεγχο της απόστασης μεταξύ των γραφικών στοιχείων.

Σε αυτήν την ανάρτηση ιστολογίου, θα εξετάσουμε τον τρόπο διαχείρισης του χώρου μεταξύ των αντικειμένων σε ένα Flutter Row.

Η ιδιότητα mainAxisAlignment

ο mainAxisAlignment Η ιδιότητα είναι ο πιο απλός τρόπος για τον έλεγχο της απόστασης στο α Row. Αυτό το κατάλυμα προσφέρει μια ποικιλία επιλογών, όπως spaceBetween, spaceAroundκαι spaceEvenly.

διάστημα Μεταξύ

const Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)

Με spaceBetweenτο πρώτο και το τελευταίο στοιχείο ευθυγραμμίζονται στις άκρες του Rowκαι ο υπόλοιπος χώρος κατανέμεται ομοιόμορφα μεταξύ των άλλων στοιχείων.

διάστημα Γύρω

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)

spaceAround κατανέμει επίσης το χώρο ομοιόμορφα, αλλά σε αντίθεση spaceBetweenκατανέμει το μισό χώρο πριν από το πρώτο στοιχείο και μετά το τελευταίο στοιχείο.

χώρο Ομοιόμορφα

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)

spaceEvenly διαιρεί ομοιόμορφα τον χώρο μεταξύ όλων των στοιχείων, συμπεριλαμβανομένων των πρώτων και των τελευταίων στοιχείων, δημιουργώντας ομοιόμορφο χώρο μεταξύ κάθε γραφικού στοιχείου.

Ακολουθεί ο πλήρης κωδικός για αναφορά.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text(
            'Flutter Example',
          ),
        ),
        body: const Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.home),
            Icon(Icons.search),
            Icon(Icons.person),
          ],
        ));
  }
}

Διαχείριση του χώρου μεταξύ των στοιχείων σε ένα Flutter Row είναι εύκολο αλλά ισχυρό, χάρη στο mainAxisAlignment ιδιοκτησία. Είτε επιλέξετε spaceBetween, spaceAroundή spaceEvenlyκάθε επιλογή έχει το δικό της σύνολο πλεονεκτημάτων που μπορούν να κάνουν τη διάταξη της εφαρμογής σας πιο καθαρή και πιο οργανωμένη.