Flutter學習筆記 螢幕適配

flutter螢幕適配方案，使頁面設計在不同尺寸的螢幕上都能顯示一致

可以使用外掛程式：flutter_screenutil

安裝：

dependencies:

flutter:
sdk: flutter
# 新增依賴
flutter_screenutil: ^0.6.0

import 'package:flutter_screenutil/flutter_screenutil.dart';

screenutil.instance = screenutil(width: 1080, height: 1980)..init(context);

根據螢幕高度適配height: screenutil.getinstance().setheight(200.0),

//匯入

import 'package:flutter_screenutil/flutter_screenutil.dart';
...  @override
widget build(buildcontext context) '); //device width
print('裝置高度:$'); //device height
print('裝置的畫素密度:$'); //device pixel density
print(
'底部安全區距離:$'); //bottom safe zone distance，suitable for buttons with full screen
print(
'狀態列高度:$px'); //status bar height , notch will be higher unit px
print('實際寬度的dp與設計稿px的比例:$');
print('實際高度的dp與設計稿px的比例:$');
print(
'寬度和字型相對於設計稿放大的比例:$'); 
print(
'高度相對於設計稿放大的比例:$'); 
print('系統的字型縮放比例:$');
return new scaffold(
title: new text(widget.title),
),body: new center(
child: column(
crossaxisalignment: crossaxisalignment.center,
children: [
row(
children: [
container(
width: screenutil.getinstance().setwidth(375),
height: screenutil.getinstance().setheight(200),
color: colors.red,
child: text(
'我的寬度:$dp',
style: textstyle(
color: colors.white,
fontsize: screenutil.getinstance().setsp(12),
),),
),container(
width: screenutil.getinstance().setwidth(375),
height: screenutil.getinstance().setheight(200),
color: colors.blue,
child: text('我的寬度:$dp',
style: textstyle(
color: colors.white,
fontsize: screenutil.getinstance().setsp(12),
)),),
],),
text('裝置寬度:$px'),
text('裝置高度:$px'),
text('裝置的畫素密度:$'),
text('底部安全區距離:$px'),
text('狀態列高度:$px'),
text(
'實際高度的dp與設計稿px的比例:$',
textalign: textalign.center,
),text(
'實際高度的dp與設計稿px的比例:$',
textalign: textalign.center,
),text(
'寬度和字型相對於設計稿放大的比例:$',
textalign: textalign.center,
),text(
'高度相對於設計稿放大的比例:$',
textalign: textalign.center,
),sizedbox(
height: screenutil.getinstance().setheight(100),
),text('系統的字型縮放比例:$'),
column(
crossaxisalignment: crossaxisalignment.start,
children: [
text('我的文字大小在設計稿上是25px，不會隨著系統的文字縮放比例變化',
style: textstyle(
color: colors.black, fontsize: screenutil.getinstance().setsp(24))),
text('我的文字大小在設計稿上是25px，會隨著系統的文字縮放比例變化',
style: textstyle(
color: colors.black, fontsize: screenutil(allowfontscaling: true).setsp(24))),],)
],),
),);
}

Flutter螢幕適配（自適應）方案

現代手機螢幕尺寸各不相同，導致我們平時寫布局的時候會在個不同的移動裝置上顯示的效果不同。為了達到一套 所有手機體驗一致效果，需要做尺寸上的適配。適配方案 計算公式 實際尺寸 ui尺寸 裝置寬度 設計圖寬度 1px方案 1px 1 裝置畫素比 實現 如下 以750設計圖為例 import packag...

螢幕適配筆記

螢幕解析度 單位 px 1px 1個畫素點 螢幕畫素密度 單位 dpi 每英吋上的畫素點數 dip 密度無關畫素 以160dpi為基準 1dip 1px 則 240dpi則是1dip 1.5px sp可以根據文字大小首選項進行放縮 不同畫素密度的裝置 hdpi ldpi mdpi xhdpi xxh...

螢幕適配筆記

由於安卓是開源的，所以產生了各種各樣的機型，螢幕適配問題隨之而來。1.首先了解幾個重要概念 1.1螢幕尺寸 螢幕解析度 螢幕畫素密度 螢幕尺寸 螢幕對角線長度，單位是英吋，1英吋 2.54厘公尺 螢幕解析度 螢幕縱橫線上的畫素點數，單位是px，1px 乙個畫素點 螢幕畫素密度 螢幕每英吋上的畫素點數...