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?
dart
screen
flutter
screen-size
Tom O'Sullivan
quelle
quelle
Antworten:
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;
quelle
Das Erhalten
width
ist einfach,height
kann 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;
quelle
Der folgende Code gibt manchmal nicht die richtige Bildschirmgröße zurück:
Ich habe auf SAMSUNG SM-T580 getestet, das
{width: 685.7, height: 1097.1}
anstelle der tatsächlichen Auflösung zurückgibt1920x1080
.Benutzen Sie bitte:
import 'dart:ui'; window.physicalSize;
quelle
MediaQuery.of(context).size
logische 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/…MediaQuery.of(context).size.width
undMediaQuery.of(context).size.height
funktioniert gut, aber jedes Mal müssen Ausdrücke wie width / 20 geschrieben werden, um eine bestimmte Höhenbreite festzulegen.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
quelle
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),);
quelle
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
quelle