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

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

GlobalKey for Advanced Measurements

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

Ο Πλήρης Κώδικας

Δείτε πώς μπορείτε να το εφαρμόσετε:

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: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});
  final GlobalKey columnKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text(
            'Flutter Example',
          ),
        ),
        body: Column(
          key: columnKey,
          children: [
            const Text('First Child'),
            const Text('Second Child'),
            ElevatedButton(
              onPressed: () {
                final RenderBox renderBox =
                    columnKey.currentContext!.findRenderObject() as RenderBox;
                final columnWidth = renderBox.size.width;
                final columnHeight = renderBox.size.height;

                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(
                        'Column Width: $columnWidth, Column Height: $columnHeight'),
                  ),
                );
              },
              child: const Text('Get Dimensions'),
            ),
          ],
        ));
  }
}

Επεξήγηση κώδικα

• Εκκίνηση GlobalKey: Ξεκινάμε δημιουργώντας ένα GlobalKey και αναθέτοντάς το στο key ιδιοκτησία του Column.
• RenderBox: Μετά το Column είναι κατασκευασμένο, μπορούμε να το φέρουμε RenderBox με χρήση αντικειμένου columnKey.currentContext!.findRenderObject().
• Λήψη Διαστάσεων: renderBox.size.width και renderBox.size.height μας παρέχει το πλάτος και το ύψος του Column.
• Εμφάνιση Διαστάσεων: Χρησιμοποιούμε α SnackBar για να εμφανίσετε αυτές τις διαστάσεις όταν πατήσετε το κουμπί.

Πότε να χρησιμοποιήσετε το GlobalKey

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

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