Stworzyłem nową aplikację na flutterze i miałem problemy z rozmiarami ekranu podczas przełączania się między różnymi urządzeniami.
Stworzyłem aplikację przy użyciu rozmiaru ekranu Pixel 2XL, a ponieważ miałem kontenery z elementem podrzędnym ListView, poproszono mnie o podanie wysokości i szerokości kontenera.
Więc kiedy przełączam urządzenie na nowe urządzenie, pojemnik jest za długi i wyświetla błąd.
Jak mogę to zrobić, aby aplikacja była zoptymalizowana dla wszystkich ekranów?
dart
screen
flutter
screen-size
Tom O'Sullivan
źródło
źródło
Odpowiedzi:
Możesz użyć:
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
Aby uzyskać wysokość tylko SafeArea (dla iOS 11 i nowszych):
var padding = MediaQuery.of(context).padding;
double newheight = height - padding.top - padding.bottom;
źródło
Zdobycie
width
jest łatwe, aleheight
może być trudne , oto sposoby radzenia sobieheight
// 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;
źródło
Poniższy kod czasami nie zwraca prawidłowego rozmiaru ekranu:
Testowałem na SAMSUNG SM-T580, który zwraca
{width: 685.7, height: 1097.1}
zamiast rzeczywistej rozdzielczości1920x1080
.Proszę użyć:
import 'dart:ui'; window.physicalSize;
źródło
MediaQuery.of(context).size
zwraca logiczne piksele. Ale to samo będzie używane przez inne widżety Flutter. Więc w sumie otrzymasz proporcjonalny rozmiar, jeśli tego potrzebujesz. Jeśli potrzebujesz dokładnej wartości piksela urządzenia można zrobić coś takiego, na przykład o szerokości:MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio
. Właśnie napisałem artykuł na ten temat, na wypadek gdyby więcej ludzi szukałoMediaQuery.of(context).size.width
iMediaQuery.of(context).size.height
działa świetnie, ale za każdym razem trzeba pisać wyrażenia takie jak szerokość / 20, aby ustawić określoną wysokość i szerokość.Tak, dostępna
flutter_screenutil
wtyczka umożliwiająca dostosowanie rozmiaru ekranu i czcionki. Pozwól, aby Twój interfejs użytkownika wyświetlał rozsądny układ na różnych rozmiarach ekranu!Stosowanie:
Dodaj zależność :
Przed instalacją sprawdź najnowszą wersję.
dependencies: flutter: sdk: flutter # add flutter_ScreenUtil flutter_screenutil: ^0.4.2
Dodaj następujące importy do swojego kodu Dart:
import 'package:flutter_screenutil/flutter_screenutil.dart';
Zainicjuj i ustaw rozmiar dopasowania i rozmiar czcionki zgodnie ze skalą zgodnie z opcją dostępności „rozmiar czcionki” systemu
//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);
Posługiwać się:
//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), ),
Proszę odnieść się zaktualizowaną dokumentację po więcej szczegółów
Uwaga: przetestowałem i używam tej wtyczki, która naprawdę działa świetnie na wszystkich urządzeniach, w tym na iPadzie
Mam nadzieję, że to komuś pomoże
źródło
Hej, możesz użyć tej klasy, aby uzyskać procentową szerokość i wysokość ekranu
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); } }
i używać w ten sposób
Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);
źródło
Jak uzyskać dostęp do rozmiaru ekranu, gęstości pikseli lub proporcji we flutter?
Możemy uzyskać dostęp do rozmiaru ekranu i innych, takich jak gęstość pikseli, współczynnik proporcji itp. Z pomocą MediaQuery.
syntex: MediaQuery.of (kontekst). rozmiar.wysokość
źródło
Po prostu zadeklaruj funkcję
Size screenSize() { return MediaQuery.of(context).size; }
Użyj jak poniżej
return Container( width: screenSize().width, height: screenSize().height, child: ... )
źródło
Zauważyliśmy, że korzystanie z
MediaQuery
klasy może być nieco kłopotliwe, a ponadto brakuje w niej kilku kluczowych informacji.Tutaj mamy małą klasę pomocniczą Screen, której używamy we wszystkich naszych nowych projektach:
class Screen { static double get _ppi => (Platform.isAndroid || Platform.isIOS)? 150 : 96; static bool isLandscape(BuildContext c) => MediaQuery.of(c).orientation == Orientation.landscape; //PIXELS static Size size(BuildContext c) => MediaQuery.of(c).size; static double width(BuildContext c) => size(c).width; static double height(BuildContext c) => size(c).height; static double diagonal(BuildContext c) { Size s = size(c); return sqrt((s.width * s.width) + (s.height * s.height)); } //INCHES static Size inches(BuildContext c) { Size pxSize = size(c); return Size(pxSize.width / _ppi, pxSize.height/ _ppi); } static double widthInches(BuildContext c) => inches(c).width; static double heightInches(BuildContext c) => inches(c).height; static double diagonalInches(BuildContext c) => diagonal(c) / _ppi; }
Używać
bool isLandscape = Screen.isLandscape(context) bool isLargePhone = Screen.diagonal(context) > 720; bool isTablet = Screen.diagonalInches(context) >= 7; bool isNarrow = Screen.widthInches(context) < 3.5;
Aby uzyskać więcej, zobacz: https://blog.gskinner.com/archives/2020/03/flutter-simplify-platform-detection-responsive-sizing.html
źródło
Korzystając z poniższej metody, możemy uzyskać fizyczną wysokość urządzenia. Dawny. 1080X1920
WidgetsBinding.instance.window.physicalSize.height WidgetsBinding.instance.window.physicalSize.width
źródło