Πώς να κάνετε τη σειρά με δυνατότητα κλικ στο Flutter

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

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

GestureDetector

ο GestureDetector Το widget είναι ένας απλός τρόπος για να κάνετε όχι απλώς ένα Row, αλλά οποιοδήποτε γραφικό στοιχείο διαδραστικό. Προσφέρει διάφορες επιστροφές κλήσης για χειρισμό διαφορετικών χειρονομιών, όπως πατήματα, διπλά χτυπήματα και παρατεταμένα πατήματα.

Σειρά με δυνατότητα κλικ με το GestureDetector

GestureDetector(
  onTap: () {
    // Your click event code here
    print('Row tapped!');
  },
  child: const Row(
    children: <Widget>[
      Icon(Icons.favorite),
      Text('Tap me!'),
    ],
  ),
)

Όταν ο χρήστης πατήσει οπουδήποτε μέσα στο Rowο onTap εκτελείται η επανάκληση και σε αυτήν την περίπτωση, εκτυπώνει ένα μήνυμα στην κονσόλα.

InkWell

Ένα άλλο widget που χρησιμοποιείται συνήθως για να κάνει τα στοιχεία με δυνατότητα κλικ στο Flutter είναι InkWell. Παρέχει τις ίδιες επανακλήσεις με το πάτημα GestureDetectorαλλά δείχνει επίσης ένα κυματιστικό αποτέλεσμα κατά την αφή, παρέχοντας οπτική ανάδραση, η οποία είναι στάνταρ στο σχεδιασμό υλικού.

Σειρά με δυνατότητα κλικ με InkWell

InkWell(
  onTap: () {
    // Your click event code here
    print('Row tapped!');
  },
  child: const SizedBox(
            width: double.infinity,
            child: Row(
              children: <Widget>[
                Icon(Icons.star),
                Text('Tap me for a ripple effect!'),
              ],
            ),
          )
)

ο InkWell πρέπει να τοποθετηθεί σε α Material widget για να εμφανίσετε σωστά το εφέ κυματισμού και Container εξασφαλίζει την InkWell τεντώνεται για να γεμίσει τον γονιό του.

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

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: InkWell(
          onTap: () {
            // Your click event code here
            print('Row tapped!');
          },
          child: const SizedBox(
            width: double.infinity,
            child: Row(
              children: <Widget>[
                Icon(Icons.star),
                Text('Tap me for a ripple effect!'),
              ],
            ),
          ),
        ));
  }
}

Κάνοντας ένα Row με δυνατότητα κλικ στο Flutter μπορεί να γίνει με διάφορους τρόπους, ανάλογα με την ανάγκη για οπτική ανατροφοδότηση και το πλαίσιο στο οποίο χρησιμοποιείται η σειρά. Είτε επιλέγετε την απλότητα του GestureDetector ή την υλική ανατροφοδότηση του InkWellτο Flutter προσφέρει ισχυρές λύσεις για τη δημιουργία μιας διαδραστικής και ανταποκρινόμενης διεπαφής χρήστη.