Πώς να τοποθετήσετε τα παιδιά στην κορυφή και στο κάτω μέρος στη σειρά Flutter

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

Εδώ, θα συζητήσουμε πώς να ευθυγραμμίσετε τα παιδιά κάθετα μέσα σε ένα Row παρέχοντάς του ένα προκαθορισμένο ύψος και πλάτος, μαζί με παραδείγματα κώδικα για σαφή κατανόηση.

Κάθετη στοίχιση σε μια σειρά

Για να ελέγξετε την κατακόρυφη στοίχιση των γραφικών στοιχείων μέσα στο α Rowχρησιμοποιούμε το crossAxisAlignment ιδιοκτησία. Αυτή η ιδιότητα αποφασίζει πώς θα τοποθετηθούν τα παιδιά κατά μήκος του κατακόρυφου άξονα (ο εγκάρσιος άξονας για μια σειρά).

Για να δούμε οπτικά τη στοίχιση, πρέπει πρώτα να ορίσουμε α Row με συγκεκριμένο ύψος. Αυτό επιτυγχάνεται με το τύλιγμα του Row σε ένα Container ή α SizedBox με προκαθορισμένο πλάτος και ύψος.

Ευθυγραμμίστε το παιδί στην κορυφή μιας σειράς

Δείτε πώς μπορείτε να ευθυγραμμίσετε ένα θυγατρικό γραφικό στοιχείο στην κορυφή του α Row που έχει προκαθορισμένο ύψος:

Container(
  width: double.infinity, // Taking the full width of the screen
  height: 100.0, // Predefined height for the Row
  color: Colors.grey[300], // Background color for visual reference
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start, // Aligns children to the top
    children: <Widget>[
      Container(
        color: Colors.blue,
        child: const Text('Top Aligned'),
      ),
      // Other children...
    ],
  ),
)

Σε αυτόν τον κώδικα, το Row έχει ύψος 100,0 pixel και τα παιδιά του θα ευθυγραμμιστούν στην επάνω άκρη αυτού του κοντέινερ.

Ευθυγραμμίστε το παιδί στο κάτω μέρος μιας σειράς

Ομοίως, εάν θέλετε να ευθυγραμμίσετε ένα θυγατρικό γραφικό στοιχείο στο κάτω μέρος του α Rowθα ορίζατε crossAxisAlignment προς την CrossAxisAlignment.end:

Container(
  width: double.infinity,
  height: 100.0,
  color: Colors.grey[300],
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.end, // Aligns children to the bottom
    children: <Widget>[
      Container(
        color: Colors.red,
        child: const Text('Bottom Aligned'),
      ),
      // Other children...
    ],
  ),
)

Με CrossAxisAlignment.endο Text Το γραφικό στοιχείο είναι πλέον ευθυγραμμισμένο στο κάτω μέρος του Row.

Πολλά παιδιά ευθυγραμμισμένα στην κορυφή και στο κάτω μέρος

Για να απεικονίσει πολλά παιδιά μέσα σε ένα Row με μερικά ευθυγραμμισμένα στο επάνω μέρος και άλλα στο κάτω μέρος, πρέπει να χρησιμοποιήσουμε το Align widget για παράκαμψη του crossAxisAlignment για μεμονωμένα παιδιά:

Container(
  width: double.infinity,
  height: 100.0,
  color: Colors.grey[300],
  child: Row(
    children: <Widget>[
      Align(
        alignment: Alignment.topLeft,
        child: Container(
          color: Colors.green,
          child: Text('Top Aligned'),
        ),
      ),
      Spacer(), // This will space out the children to the opposite ends
      Align(
        alignment: Alignment.bottomRight,
        child: Container(
          color: Colors.purple,
          child: Text('Bottom Aligned'),
        ),
      ),
    ],
  ),
)

Εδώ, Spacer χρησιμοποιείται για να ωθήσει τα παιδιά στην αρχή και στο τέλος του Rowενώ Align Τα γραφικά στοιχεία χρησιμοποιούνται για την ευθυγράμμιση κάθε παιδιού στο επάνω και το κάτω μέρος του κοντέινερ, αντίστοιχα.

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

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: Container(
          width: double.infinity,
          height: 100.0,
          color: Colors.grey[300],
          child: Row(
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                child: Container(
                  color: Colors.green,
                  child: const Text('Top Aligned'),
                ),
              ),
              const Spacer(), // This will space out the children to the opposite ends
              Align(
                alignment: Alignment.bottomRight,
                child: Container(
                  color: Colors.purple,
                  child: const Text('Bottom Aligned'),
                ),
              ),
            ],
          ),
        ));
  }
}

Κάθετη ευθυγράμμιση εντός α Row με προκαθορισμένο ύψος σε Flutter απαιτεί κατανόηση του τρόπου με τον οποίο το crossAxisAlignment έργα ιδιοκτησίας και περιστασιακά η χρήση του Align widgets για μεμονωμένη στοίχιση παιδιών.

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

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