Flatterbildschirmgröße

80

Ich habe eine neue Anwendung zum Flattern erstellt und beim Umschalten zwischen verschiedenen Geräten Probleme mit der Bildschirmgröße gehabt.

Ich habe die Anwendung mit der Bildschirmgröße Pixel 2XL erstellt. Da ich Container mit einem untergeordneten Element von ListView hatte, wurde ich gebeten, eine Höhe und Breite für den Container anzugeben.

Wenn ich das Gerät auf ein neues Gerät umstelle, ist der Container zu lang und gibt einen Fehler aus.

Wie kann ich vorgehen, damit die Anwendung für alle Bildschirme optimiert wird?

Tom O'Sullivan
quelle
1
> Ich hatte Container mit untergeordnetem Element von ListView. Ich wurde gebeten, eine Höhe und Breite für den Container anzugeben. könntest Du das erläutern? Sie können eine Listenansicht erstellen, die einfach den gesamten Speicherplatz einnimmt. Können Sie Ihr Layout teilen?
Wasyl

Antworten:

224

Sie können verwenden:

  • double width = MediaQuery.of(context).size.width;
  • double height = MediaQuery.of(context).size.height;

So erhalten Sie die Höhe nur von SafeArea (für iOS 11 und höher):

  • var padding = MediaQuery.of(context).padding;
  • double newheight = height - padding.top - padding.bottom;
yashthakkar1173
quelle
2
So erhalten Sie App-Größe ohne sicheren Bereich
user7856586
39

Das Erhalten widthist einfach, heightkann aber schwierig sein . Es folgen die folgenden Vorgehensweisenheight

// full screen width and height
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

// height without SafeArea
var padding = MediaQuery.of(context).padding;
double height1 = height - padding.top - padding.bottom;

// height without status bar
double height2 = height - padding.top;

// height without status and toolbar
double height3 = height - padding.top - kToolbarHeight;
CopsOnRoad
quelle
1
Toll! Genau das, was ich wollte. Verrückt, dass ich ausgelassen habe, um die Höhe des sicheren Bereichs zu berechnen, um meine Ansichten zu zeichnen. Ich habe mich gefragt, was die ganze Zeit schief gelaufen ist! : D Prost!
Rohit TP
18

Der folgende Code gibt manchmal nicht die richtige Bildschirmgröße zurück:

MediaQuery.of(context).size

Ich habe auf SAMSUNG SM-T580 getestet, das {width: 685.7, height: 1097.1}anstelle der tatsächlichen Auflösung zurückgibt 1920x1080.

Benutzen Sie bitte:

import 'dart:ui';

window.physicalSize;
Hans Zhang
quelle
10
Sieht aus wie MediaQuery.of(context).sizelogische Pixel zurückgibt. Das gleiche wird jedoch von den anderen Flutter-Widgets verwendet. Alles in allem erhalten Sie also eine proportionale Größe, wenn Sie dies benötigen. Wenn Sie den genauen Pixelwert des Geräts benötigen, können Sie Folgendes tun, z. B. für die Breite : MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio. Ich habe gerade einen Artikel darüber geschrieben, falls mehr Leute dasselbe suchen: medium.com/tagmalogic/…
Miha
5

MediaQuery.of(context).size.widthund MediaQuery.of(context).size.heightfunktioniert gut, aber jedes Mal müssen Ausdrücke wie width / 20 geschrieben werden, um eine bestimmte Höhenbreite festzulegen.

Ich habe eine neue Anwendung zum Flattern erstellt und beim Umschalten zwischen verschiedenen Geräten Probleme mit der Bildschirmgröße gehabt.

Ja, flutter_screenutil Plugin zum Anpassen von Bildschirm und Schriftgröße verfügbar. Lassen Sie Ihre Benutzeroberfläche ein angemessenes Layout auf verschiedenen Bildschirmgrößen anzeigen!

Verwendung:

Abhängigkeit hinzufügen:

Bitte überprüfen Sie vor der Installation die neueste Version.

dependencies:
  flutter:
    sdk: flutter
  # add flutter_ScreenUtil
  flutter_screenutil: ^0.4.2

Fügen Sie Ihrem Dart-Code die folgenden Importe hinzu:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Initialisieren Sie die Anpassungsgröße und die Schriftgröße und stellen Sie sie so ein, dass sie gemäß der Eingabehilfenoption "Schriftgröße" des Systems skaliert werden

//fill in the screen size of the device in the design

//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil()..init(context);

//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//If you wang to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

Verwenden:

//for example:
//rectangle
Container(
           width: ScreenUtil().setWidth(375),
           height: ScreenUtil().setHeight(200),
           ...
            ),

////If you want to display a square:
Container(
           width: ScreenUtil().setWidth(300),
           height: ScreenUtil().setWidth(300),
            ),

Weitere Informationen finden Sie in der aktualisierten Dokumentation

Hinweis: Ich habe dieses Plugin getestet und verwendet, das mit allen Geräten, einschließlich iPad, wirklich gut funktioniert

Hoffe das hilft jemandem

Rahul Mahadik
quelle
Wenn Sie dieses Plugin verwenden, bedeutet dies, dass Sie nur 1 Breite und Höhe definieren können. Wenn Sie beispielsweise das iPhone 6 (iPhone6 ​​750 * 1334) verwenden, müssen Sie diese Werte verwenden. Wie reagiert es jedoch auf alle iPhones? ????
GY22
Sie legen Ihr Basisdesign nur basierend auf einer Bildschirmgröße fest. Das Plugin passt sich korrekt an verschiedene Bildschirmgrößen an
Marc
1

Hey, Sie können diese Klasse verwenden, um die Bildschirmbreite und -höhe in Prozent zu ermitteln

import 'package:flutter/material.dart';
class Responsive{
  static width(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.width*(p/100);
  }
  static height(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.height*(p/100);
  }
}

und so zu verwenden

Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);
Nikhil Biju
quelle
0

Wie kann ich beim Flattern auf die Bildschirmgröße, Pixeldichte oder das Seitenverhältnis zugreifen?

Mit Hilfe von MediaQuery können wir auf die Bildschirmgröße und andere Faktoren wie Pixeldichte, Seitenverhältnis usw. zugreifen.

syntex: MediaQuery.of (Kontext) .size.height

mewadaarvind
quelle