Flutter-适配相关

最新推荐文章于 2024-09-26 20:17:03 发布

mrRuby

最新推荐文章于 2024-09-26 20:17:03 发布

阅读量2.2k

点赞数 2

分类专栏： Flutter 文章标签： flutter 适配方案尺寸大小

本文链接：https://blog.csdn.net/mrRuby/article/details/122252428

版权

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

摘要由CSDN通过智能技术生成

一、前言

做移动应用开发，各个系统都自己的适配方案，比如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(
        title: const Text('适配测试'),
      ),
      body:  Row(
        children: List.generate(6, (index) => Container(
          width: 60,
          height: 60,
          color: Color.fromARG