Kích thước màn hình rung

Tôi đã tạo một ứng dụng mới trên Flaming và tôi đã gặp sự cố với kích thước màn hình khi chuyển đổi giữa các thiết bị khác nhau.

Tôi đã tạo ứng dụng bằng cách sử dụng kích thước màn hình Pixel 2XL và vì tôi đã có các vùng chứa với phần tử con của ListView nên nó yêu cầu tôi bao gồm chiều cao và chiều rộng cho vùng chứa.

Vì vậy, khi tôi chuyển thiết bị sang thiết bị mới, vùng chứa quá dài và gây ra lỗi.

Làm thế nào tôi có thể bắt đầu tạo nó để ứng dụng được tối ưu hóa cho tất cả các màn hình?

Bạn có thể dùng:

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

Để chỉ có chiều cao của SafeArea (dành cho iOS 11 trở lên):

• var padding = MediaQuery.of(context).padding;
• double newheight = height - padding.top - padding.bottom;

Nhận widthđược dễ dàng nhưng heightcó thể khó khăn , sau đây là các cách để đối phó vớiheight

// 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;

Đoạn mã dưới đây đôi khi không trả về kích thước màn hình chính xác:

MediaQuery.of(context).size

Tôi đã thử nghiệm trên SAMSUNG SM-T580, kết quả trả về {width: 685.7, height: 1097.1}thay vì độ phân giải thực 1920x1080.

Vui lòng sử dụng:

import 'dart:ui';

window.physicalSize;

MediaQuery.of(context).size.widthvà MediaQuery.of(context).size.heighthoạt động tốt, nhưng mỗi khi cần viết các biểu thức như width / 20 để đặt chiều rộng chiều cao cụ thể.

Tôi đã tạo một ứng dụng mới trên Flaming và tôi đã gặp sự cố với kích thước màn hình khi chuyển đổi giữa các thiết bị khác nhau.

Có, flutter_screenutil plugin có sẵn để điều chỉnh kích thước màn hình và phông chữ. Hãy để giao diện người dùng của bạn hiển thị bố cục hợp lý trên các kích thước màn hình khác nhau!

Sử dụng:

Thêm phụ thuộc ：

Vui lòng kiểm tra phiên bản mới nhất trước khi cài đặt.

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

Thêm các lần nhập sau vào mã Dart của bạn:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Khởi tạo và đặt kích thước phù hợp và kích thước phông chữ để chia tỷ lệ theo tùy chọn trợ năng "kích thước phông chữ" của hệ thống

//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);

Sử dụng:

//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),
            ),

Vui lòng tham khảo tài liệu cập nhật để biết thêm chi tiết

Lưu ý: Tôi đã thử nghiệm và sử dụng plugin này, plugin này thực sự hoạt động tốt với tất cả các thiết bị bao gồm cả iPad

Hy vọng điều này sẽ giúp ai đó

Này, bạn có thể sử dụng lớp này để tính Chiều rộng và Chiều cao màn hình theo tỷ lệ phần trăm

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);
  }
}

và sử dụng như thế này

Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);

Làm thế nào để truy cập kích thước màn hình hoặc mật độ pixel hoặc tỷ lệ khung hình trong chế độ rung?

Chúng tôi có thể truy cập kích thước màn hình và các thứ khác như mật độ pixel, tỷ lệ khung hình, v.v. với sự trợ giúp của MediaQuery.

syntex: MediaQuery.of (ngữ cảnh) .size.height

Chỉ cần khai báo một hàm

Size screenSize() {
return MediaQuery.of(context).size;
}

Sử dụng như bên dưới

return Container(
      width: screenSize().width,
      height: screenSize().height,
      child: ...
 )

Chúng tôi nhận thấy rằng việc sử dụng MediaQuerylớp có thể hơi cồng kềnh và nó cũng thiếu một vài thông tin quan trọng.

Ở đây Chúng tôi có một lớp trình trợ giúp Màn hình nhỏ, mà chúng tôi sử dụng trên tất cả các dự án mới của mình:

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;
}

Để sử dụng

bool isLandscape = Screen.isLandscape(context)
bool isLargePhone = Screen.diagonal(context) > 720;
bool isTablet = Screen.diagonalInches(context) >= 7;
bool isNarrow = Screen.widthInches(context) < 3.5;

Để biết thêm, hãy xem: https://blog.gskinner.com/archives/2020/03/flutter-simplify-platform-detection-responsive-sizing.html

Sử dụng phương pháp sau, chúng ta có thể nhận được chiều cao vật lý của thiết bị. Ví dụ. 1080X1920

WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width