저는 flutter에서 새로운 응용 프로그램을 만들었고 다른 장치간에 전환 할 때 화면 크기에 문제가있었습니다.
Pixel 2XL 화면 크기를 사용하여 응용 프로그램을 만들었고 ListView의 자식이있는 컨테이너가 있었기 때문에 컨테이너의 높이와 너비를 포함하도록 요청 받았습니다.
따라서 장치를 새 장치로 전환하면 컨테이너가 너무 길어 오류가 발생합니다.
애플리케이션이 모든 화면에 최적화되도록하려면 어떻게해야합니까?
답변
당신이 사용할 수있는:
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
SafeArea의 높이 만 얻으려면 (iOS 11 이상) :
var padding = MediaQuery.of(context).padding;
double newheight = height - padding.top - padding.bottom;
답변
얻기 width
는 쉽지만 height
까다로울 수 있습니다 . 다음은 처리하는 방법입니다.height
// 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;
답변
아래 코드는 때때로 올바른 화면 크기를 반환하지 않습니다.
MediaQuery.of(context).size
{width: 685.7, height: 1097.1}
실제 해상도 대신 반환되는 SAMSUNG SM-T580에서 테스트했습니다 1920x1080
.
사용하시기 바랍니다:
import 'dart:ui';
window.physicalSize;
답변
MediaQuery.of(context).size.width
그리고 MediaQuery.of(context).size.height
잘 작동하지만, 일련의 특정 높이를 폭 폭 / 20와 같은 쓰기 표현에 대한 모든 시간이 필요합니다.
저는 flutter에서 새로운 응용 프로그램을 만들었고 다른 장치간에 전환 할 때 화면 크기에 문제가있었습니다.
예, 화면 및 글꼴 크기를 조정하는 데 사용할 수있는 flutter_screenutil
플러그인 입니다. UI가 다양한 화면 크기에 합리적인 레이아웃을 표시하도록하십시오!
용법:
종속성 추가 :
설치하기 전에 최신 버전을 확인하십시오.
dependencies:
flutter:
sdk: flutter
# add flutter_ScreenUtil
flutter_screenutil: ^0.4.2
Dart 코드에 다음 가져 오기를 추가합니다.
import 'package:flutter_screenutil/flutter_screenutil.dart';
시스템의 “글꼴 크기”접근성 옵션에 따라 크기 조정을 위해 맞춤 크기 및 글꼴 크기를 초기화하고 설정합니다.
//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);
사용하다:
//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),
),
자세한 내용은 업데이트 된 문서 를 참조하십시오.
참고 : 이 플러그인을 테스트하고 사용했는데 iPad를 포함한 모든 장치에서 정말 잘 작동합니다.
이것이 누군가를 도울 수 있기를 바랍니다.
답변
이 클래스를 사용하여 화면 너비와 높이를 백분율로 얻을 수 있습니다.
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);
}
}
이렇게 사용하려면
Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);
답변
Flutter에서 화면 크기 또는 픽셀 밀도 또는 종횡비에 액세스하는 방법은 무엇입니까?
MediaQuery의 도움으로 화면 크기 및 기타 픽셀 밀도, 종횡비 등에 액세스 할 수 있습니다.
syntex : MediaQuery.of (context) .size.height
답변
함수를 선언하기 만하면됩니다.
Size screenSize() {
return MediaQuery.of(context).size;
}
아래와 같이 사용
return Container(
width: screenSize().width,
height: screenSize().height,
child: ...
)