一、前言
做移动应用开发,各个系统都自己的适配方案,比如Android可以用dp、sp来描述大小,IOS使用pt来描述。但是入手Flutter后,却发现我们要描述的widget的大小没有单位,比如
Container(
width: 40,
height: 40,
),
那么这个40到底是什么意思呢?px、dp或者dp,其实都不是。
二、了解的Flutter的尺寸
测试手机信息:720 * 1080 320dpi。
运行以下测试代码
void main(){
runApp(MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('适配测试'),
),
body: const Text('Hello world'),
),
));
}
通过Flutter的DevTool查看:

可以看到这里的尺寸显示的是 w = 360.0,h = 540.0
下面修改我们的代码,水平添加6个 width为60的Contaniner:
void main(){
runApp(MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(

本文介绍了Flutter的尺寸概念,指出其为逻辑像素,与设备分辨率和密度相关,并探讨了不同设备上的适配问题。作者提供了移动端的适配方案,包括比例缩放方法以及自定义的SizeFit.dart扩展,以实现宽度适配,确保在不同屏幕尺寸下达到预期设计效果。
最低0.47元/天 解锁文章
9947





