Sobes.tech
Junior

Milyen módon lehet szöveget bevinni az alkalmazásba?

sobes.tech MI

Válasz az MI-től

A Flutterben több alapvető szövegbevitel mód létezik:

  1. TextField widget:

    • Egy vonalas szövegbevitelhez alapértelmezett widget.
    • Lehetővé teszi a megjelenés, viselkedés, billentyűzet, validálás és vezérlő testreszabását.
    • Név, email, jelszó mezők számára alkalmas.
    // TextField használati példa
    TextField(
      decoration: InputDecoration(
        labelText: 'Név',
        border: OutlineInputBorder(),
      ),
      onChanged: (text) {
        // Szöveg változásának kezelése
      },
    )
    
  2. TextFormField widget:

    • A TextField köré épül, integrálva a Form-mal.
    • Egyszerűsíti a bemenet validálását és az űrlapadatok mentését.
    • Gyakran használják űrlapokon felhasználói adatok gyűjtésére.
    // TextFormField használati példa
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Email',
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Kérem, adja meg az emailt';
        }
        return null; // null-t ad vissza, ha a validálás sikeres
      },
      onSaved: (value) {
        // Az érték mentése a validálás után
      },
    )
    
  3. EditableText widget:

    • Alacsony szintű widget szerkeszthető szöveghez.
    • Alapvető szerkesztési lehetőségeket nyújt, de nincs kész dizájnja.
    • Egyedi bemeneti mezők létrehozására használják, például szövegszerkesztőkben.
    // `EditableText` használati példa (több kézi beállítást igényel)
    EditableText(
      controller: TextEditingController(), // Szövegkezelő
      focusNode: FocusNode(), // Fókusz node
      style: TextStyle(color: Colors.black), // Szöveg stílus
      cursorColor: Colors.blue, // Kurzor színe
      backgroundCursorColor: Colors.grey, // Kurzor háttér színe
    )
    
  4. Rendszer billentyűzet:

    • A Flutter automatikusan kezeli a rendszer billentyűzet megjelenítését, amikor szövegbeviteli widgetre fókuszál.
    • A billentyűzet típusa (szám, betű, email stb.) a keyboardType tulajdonsággal állítható a TextField vagy TextFormField-ben.
    // Szám billentyűzet beállítása
    TextField(
      keyboardType: TextInputType.number,
    )
    
  5. Egyedi billentyűzet:

    • Saját billentyűzetet hozhat létre gombok widgetekkel és azok lenyomásának kezelésével a szöveg módosításához a vezérlőben.
    • Ezt a megközelítést speciális esetekben használják, például banki alkalmazásokban, ahol egyedi kiosztás van.
  6. Szöveg beillesztése a vágólapról:

    • A TextField és TextFormField widgetek alapértelmezés szerint támogatják a szöveg beillesztését a vágólapról a kontextus menü segítségével.
    • A vágólaphoz való programozott hozzáférés a Clipboard osztályon keresztül történik.
    import 'package:flutter/services.dart';
    
    // Szöveg lekérése a vágólapról
    Future<void> pasteText() async {
      ClipboardData? data = await Clipboard.getData(Clipboard.kTextPlain);
      if (data != null) {
        String? text = data.text;
        // A kapott szöveg használata
      }
    }
    

A feladattól és a UI követelményektől függően kiválasztja a megfelelő szövegbeviteli módot. A legtöbb standard forgatókönyvhöz elegendő a TextField és TextFormField.