Πώς να ρυθμίσετε το πλάτος και το ύψος της στήλης Flutter

2
Πώς να ρυθμίσετε το πλάτος και το ύψος της στήλης Flutter

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

Γραφικό στοιχείο στήλης

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

Μέθοδοι για τον έλεγχο του πλάτους και του ύψους

Χρησιμοποιήστε το MainAxisSize

ο Column Το widget έχει μια ιδιότητα που ονομάζεται mainAxisSize που μπορεί να πάρει δύο τιμές: MainAxisSize.min και MainAxisSize.max. Όταν το ρυθμίσετε σε min, η στήλη θα πάρει το ύψος των παιδιών της. Εάν έχει οριστεί σε maxθα καταλάβει όλο το διαθέσιμο ύψος.

Column(
  mainAxisSize: MainAxisSize.min,
  children: [...],
)

Χρησιμοποιήστε το CrossAxisAlignment

Για να ελέγξετε το πλάτος, μπορείτε να χρησιμοποιήσετε το crossAxisAlignment ιδιοκτησία. Για παράδειγμα, CrossAxisAlignment.stretch θα τεντώσει όλα τα παιδιά ώστε να ταιριάζουν με το πλάτος της στήλης.

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [...],
)

Τυλίξτε με SizedBox

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

SizedBox(
  width: 100,
  height: 200,
  child: Column(
    children: [...],
  ),
)

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

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 SizedBox(
        width: 100,
        height: 200,
        child: Column(
          children: [
            Text('First child'),
            Text('Second child'),
          ],
        ),
      ),
    );
  }
}

Βέλτιστες πρακτικές

  • Αποφύγετε τον σκληρό κώδικα: Προσπαθήστε να χρησιμοποιήσετε μονάδες απόκρισης αντί για τιμές σκληρού κωδικοποίησης.
  • Δοκιμές: Πάντα να δοκιμάζετε τη διάταξη σε πολλά μεγέθη οθόνης για να βεβαιωθείτε ότι φαίνεται όπως προβλέπεται.

Ο έλεγχος του πλάτους και του ύψους μιας στήλης στο Flutter μπορεί να μην είναι τόσο απλός όσο ορισμένα άλλα γραφικά στοιχεία, αλλά είναι σίγουρα εφικτό. Είτε επιλέξετε να χρησιμοποιήσετε MainAxisSize, CrossAxisAlignmentή SizedBoxκάθε μέθοδος έχει το δικό της σύνολο πλεονεκτημάτων και περιπτώσεων χρήσης.

Bir cevap yazın