Condividi tramite


Flutter MediaQuery per Surface Duo

Quando l'applicazione è estesa su entrambi gli schermi di Surface Duo, l'area di disegno contiene entrambi gli schermi e l'area della cerniera tra di esse. La cerniera è una feauture di visualizzazione ed è possibile usare MediaQuery per sapere dove si trova sullo schermo. MediaQuery dispone di una proprietà denominata displayFeatures che elenca tutte le aree dello schermo che vengono ostruite dalle funzionalità hardware.

int featuresCount = MediaQuery.of(context).displayFeatures.length;

Metodo di estensione della cerniera

Per semplificare l'uso della cerniera in Surface Duo, è consigliabile aggiungere un metodo di estensione a MediaQueryData. In questo modo è possibile usare MediaQuery.of(context).hingedirettamente . Se una cerniera non è presente nel dispositivo, il valore sarà Null.

/// Extension method that helps with working with the hinge directly. 
extension MediaQueryHinge on MediaQueryData { 
  DisplayFeature? get hinge { 
    for (final DisplayFeature e in displayFeatures) { 
      if (e.type == DisplayFeatureType.hinge) 
        return e; 
    } 
    return null; 
  } 
}

Controllare se la cerniera esiste diventa:

bool hasHinge = MediaQuery.of(context).hinge != null;

Visualizzare le funzionalità

Le funzionalità di visualizzazione sono aree dello schermo che possono essere non funzionali o ostruite. La struttura della classe è:

class DisplayFeature {
    final Rect bounds;
    final DisplayFeatureType type;
    final DisplayFeatureState state;
}

Proprietà della variabile di ambiente DisplayFeature:

  • bounds - Rect area della vista occupata da questa funzionalità di visualizzazione
  • type - Enumerazione per il tipo di funzionalità di visualizzazione:
    • hinge - Separatore fisico tra i due schermi del dispositivo. Surface Duo ha una hinge funzionalità di visualizzazione. Tipo di funzionalità di visualizzazione: cerniera
    • fold - Visualizza come oggetto hinge con larghezza zero. Identifica la posizione in cui lo schermo flessibile presenta una piega. Tipo di funzionalità di visualizzazione: Piega
    • cutout - Si trova al bordo dello schermo e solitamente ospita sistemi di telecamera. Tipo di funzionalità di visualizzazione: ritaglio
  • state - Enumerazione per il comportamento della funzionalità di visualizzazione, popolata solo per le pieghe e le cerniere. Per i cutout, si tratta di unknown. Questo segue attentamente la definizione Di comportamento da Android.
    • halfOpened - La cerniera del dispositivo piegabile si trova in una posizione intermedia tra lo stato aperto e chiuso, c'è un angolo non piatto tra parti dello schermo flessibile o tra pannelli dello schermo fisico.
    • flat - Il dispositivo piegabile è completamente aperto, lo spazio dello schermo presentato all'utente è piatto.
    • unknown - La postura è sconosciuta, perché è nuova e non supportata o, nel caso delle cutout funzionalità, non viene popolata.

Componenti di livello superiore

È consigliabile usare componenti di livello superiore se il progetto è adatto. TwoPane è un widget che semplifica il popolamento di ogni schermata quando l'applicazione è estesa. Consente inoltre di usare i layout di schermo tablet, desktop e più grandi.

Le finestre di dialogo e i menu popup prendono in considerazione le funzionalità di visualizzazione ed evitarne la sovrapposizione. Per avere un migliore controllo sul posizionamento dei dialoghi e sul comportamento popup, leggere l'articolo Route popup in grado di tenere conto della cerniera.