Τρόπος κεντραρίσματος αντικειμένων στη σειρά Flutter

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

Στοίχιση σειρών

ο Row Το widget στο Flutter είναι ένα flex container που επιτρέπει την οριζόντια διάταξη των θυγατρικών widget του. Όσον αφορά την ευθυγράμμιση, έχετε στη διάθεσή σας μερικά ακίνητα:

• mainAxisAlignment: Αυτό ευθυγραμμίζει τα παιδιά κατά μήκος του κύριου άξονα (οριζόντια για Row).
• crossAxisAlignment: Αυτό ευθυγραμμίζει τα παιδιά κατά μήκος του εγκάρσιου άξονα (κάθετα για Row).

Για στοιχεία κεντραρίσματος, εστιάζουμε κυρίως σε mainAxisAlignment.

Επικεντρώστε ένα μόνο παιδί στη σειρά

Όταν έχετε μόνο ένα θυγατρικό γραφικό στοιχείο σε α Row και θέλετε να το κεντράρετε οριζόντια, χρησιμοποιείτε MainAxisAlignment.center.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      color: Colors.amber,
      child: const Text('Centered Text'),
    ),
  ],
)

Σε αυτήν τη ρύθμιση, το κείμενο εντός του κοντέινερ θα εμφανίζεται στο κέντρο κατά μήκος του κύριου άξονα της σειράς.

Κέντρο πολλών παιδιών στη σειρά

Εάν έχετε πολλά γραφικά στοιχεία που θέλετε να κεντράρετε ως ομάδα, τα χρησιμοποιείτε ξανά mainAxisAlignment: MainAxisAlignment.center.

const Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, color: Colors.yellowAccent),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text('Centered Star Rating'),
    ),
    Icon(Icons.star, color: Colors.yellowAccent),
  ],
)

Αυτή η διαμόρφωση κεντράρει τα εικονίδια αστεριών και το κείμενο μαζί στη μέση της σειράς.

Κέντρο με CrossAxisAlignment

Μερικές φορές μπορεί επίσης να θέλετε να κεντράρετε κάθετα τα παιδιά της σειράς σας (κατά μήκος του διαγώνου άξονα). Εδώ είναι που crossAxisAlignment μπαίνει στο παιχνίδι.

const Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Vertically and horizontally centered text'),
  ],
)

Αυτό το απόσπασμα κώδικα διασφαλίζει ότι το κείμενο είναι κεντραρισμένο τόσο οριζόντια όσο και κάθετα εντός του 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,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('Vertically and horizontally centered text'),
          ],
        ));
  }
}

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

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