Flutter中屏幕目前最佳适配方案

最新推荐文章于 2024-04-19 19:14:49 发布

codekxx

最新推荐文章于 2024-04-19 19:14:49 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： Flutter 屏幕适配

本文链接：https://blog.youkuaiyun.com/codekxx/article/details/96841616

Flutter 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用flutter_screenutil插件实现Flutter应用的屏幕适配。通过简单的配置，在pubspec.yaml中添加依赖，并利用dart文件中的ScreenUtil方法，可以轻松获取屏幕尺寸、密度等信息，并进行基于宽度、高度的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.pubspec.yaml中加入flutter_screenutil: ^0.5.3

dependencies:
  flutter_screenutil: ^0.5.3

2.获取当前屏幕/密度/高度

引入dart文件

import 'package:flutter_screenutil/flutter_screenutil.dart';

调用方法

在build方法中初始化设计图尺寸
@override
  Widget build(BuildContext context) {
	ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
}

获取设置宽/高…等数据

获取数据：
print('设备宽度:${ScreenUtil.screenWidth}');
 print('设备高度:${ScreenUtil.screenHeight}');
 print('设备像素密度:${ScreenUtil.pixelRatio}');
 
设置数据：
这时候我们使用的尺寸是px.
根据屏幕宽度适配：width:ScreenUtil().setWidth(540);
根据屏幕高度适配：height:ScreenUtil().setHeight(200);
适配字体大小：fontSize：ScreenUtil().setSp(28,false);