Πώς να εφαρμόσετε τη στοίχιση σειρών στο Flutter

Ας βουτήξουμε σε μια από τις θεμελιώδεις πτυχές της δημιουργίας μιας εξαιρετικής διεπαφής χρήστη στο Flutter: ευθυγράμμιση στοιχείων σε Row widget. Η κατανόηση της ευθυγράμμισης είναι ζωτικής σημασίας για τη δημιουργία μιας καθαρής και οπτικά ελκυστικής διάταξης.

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

Βασική ευθυγράμμιση με χρήση mainAxisAlignment

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

Δείγμα κώδικα

const Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Hello, World!'),
    Icon(Icons.star),
  ],
)

Στον παραπάνω κώδικα, mainAxisAlignment Έχει οριστεί MainAxisAlignment.center. Αυτό κεντράρει τα στοιχεία κατά μήκος του κύριου άξονα, ο οποίος είναι οριζόντιος σε α Row.

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

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.center,
          children: [
            Icon(Icons.star),
            Text('Hello, World!'),
            Icon(Icons.star),
          ],
        ));
  }
}

Κατανόηση του CrossAxisAlignment

Μια άλλη ιδιοκτησία που πρέπει να εξετάσετε είναι crossAxisAlignmentπου ευθυγραμμίζει τα στοιχεία κάθετα στον κύριο άξονα.

Δείγμα κώδικα

const Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Icon(Icons.star),
    Text('Hello, World!'),
    Icon(Icons.star),
  ],
)

Σύνθεση crossAxisAlignment προς την CrossAxisAlignment.start ευθυγραμμίζει τα στοιχεία στην αρχή του εγκάρσιου άξονα της σειράς, που σημαίνει ότι θα ευθυγραμμιστούν στο επάνω μέρος της σειράς.

Χρησιμοποιήστε το Spacer για προσαρμοσμένη στοίχιση

Για πιο λεπτόκοκκο έλεγχο στην ευθυγράμμιση, το Spacer το widget είναι ανεκτίμητο.

Δείγμα κώδικα

const Row(
  children: [
    Icon(Icons.star),
    Spacer(flex: 1),
    Text('Hello, World!'),
    Spacer(flex: 2),
    Icon(Icons.star),
  ],
)

ο Spacer Το γραφικό στοιχείο καταλαμβάνει διαθέσιμο χώρο μέσα σε ένα Row, πιέζοντας αντίστοιχα γειτονικά γραφικά στοιχεία. ο flex Η ιδιότητα ορίζει πόσο χώρο το καθένα Spacer πρέπει να απασχολεί σε σχέση με άλλους.

Το Flutter προσφέρει πληθώρα επιλογών για την ευθυγράμμιση αντικειμένων σε α Rowαπό απλές ιδιότητες όπως mainAxisAlignment και crossAxisAlignment σε πιο προηγμένα γραφικά στοιχεία όπως Spacer. Η κατανόηση αυτών των διαφορετικών μεθόδων θα σας δώσει μεγαλύτερο έλεγχο στη διάταξη της εφαρμογής σας, διασφαλίζοντας ότι μπορείτε να ευθυγραμμίσετε τα στοιχεία σε Row όπως ακριβώς θέλεις.