当前位置: 首页 > news >正文

Flutter_学习记录_各个屏幕的适配

用flutter的这个库,可以解决:https://pub.dev/packages/flutter_screenutil

使用方法:

  1. pubspec.yaml文件中,添加库,如下图:
    在这里插入图片描述
  2. main.dart中导入头文件
import 'package:flutter_screenutil/flutter_screenutil.dart';
  1. Widget build(BuildContext context)方法中,初始化ScreenUtilInit, 代码如下:
class _MyAppState extends State<MyApp> {
  
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(750, 1334),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, child) {
        return MaterialApp(
        // home: Tabs()
          initialRoute: '/',
          onGenerateRoute: onGenerateRoute,
        );
      },
    );
  }
}
  1. 使用方法说明
ScreenUtil().setWidth(540)  (dart sdk>=2.6 : 540.w) //Adapted to screen width
    ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w
    ScreenUtil().radius(200)    (dart sdk>=2.6 : 200.r)    //Adapt according to the smaller of width or height
    ScreenUtil().setSp(24)      (dart sdk>=2.6 : 24.sp) //Adapter font
    12.sm   //return min(12,12.sp)

    ScreenUtil().pixelRatio       //Device pixel density
    ScreenUtil().screenWidth   (dart sdk>=2.6 : 1.sw)    //Device width
    ScreenUtil().screenHeight  (dart sdk>=2.6 : 1.sh)    //Device height
    ScreenUtil().bottomBarHeight  //Bottom safe zone distance, suitable for buttons with full screen
    ScreenUtil().statusBarHeight  //Status bar height , Notch will be higher
    ScreenUtil().textScaleFactor  //System font scaling factor

    ScreenUtil().scaleWidth //The ratio of actual width to UI design
    ScreenUtil().scaleHeight //The ratio of actual height to UI design

    ScreenUtil().orientation  //Screen orientation
    0.2.sw  //0.2 times the screen width
    0.5.sh  //50% of screen height
    20.setVerticalSpacing  // SizedBox(height: 20 * scaleHeight)
    20.horizontalSpace  // SizedBox(height: 20 * scaleWidth)
    const RPadding.all(8)   // Padding.all(8.r) - take advantage of const key word
    EdgeInsets.all(10).w    //EdgeInsets.all(10.w)
    REdgeInsets.all(8)       // EdgeInsets.all(8.r)
    EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
    BoxConstraints(maxWidth: 100, minHeight: 100).w    //BoxConstraints(maxWidth: 100.w, minHeight: 100.w)
    Radius.circular(16).w          //Radius.circular(16.w)
    BorderRadius.all(Radius.circular(16)).w
  1. 可以看看官方文档的说明,这里不再写了。
http://www.dtcms.com/a/32285.html

相关文章:

  • 深度体验通义灵码2.0 AI 程序员
  • 基于SpringBoot的“宠物救助及领养平台”的设计与实现(源码+数据库+文档+PPT)
  • ctfshow——robots后台泄露
  • 多态的好处
  • 基于光度立体视觉的三维重建方法
  • Linux系统使用Docker部署Geoserver并做数据挂载进行地图服务的发布和游览
  • JAVA 集成 ElasticSearch
  • 力扣每日一题【算法学习day.132】
  • ARMS 助力假面科技研发运维提效,保障极致游戏体验
  • A097基于SpringBoot实现的社区博客管理系统
  • 百度云DeepSeek一体机:百舸、千帆和一见介绍及区别对比
  • Java.lang包中的常用类 --8个包装类型、Math、Class
  • 自动驾驶的等级划分
  • 逻辑架构与软件架构在PREEvision中的设计关系
  • 为Eclipse IDE安装插件IBM编程助手watsonx Code Assistant
  • 计算机创造的奇迹——C语言
  • 基于springboot+vue的新生报到管理系统
  • 探索YOLO技术:目标检测的高效解决方案
  • Webpack 的 require.context 和 Vite 的 import.meta.glob 的详细介绍和使用
  • 车载诊断数据库 --- AUTOSAR诊断文件DEXT简介
  • 区块链相关方法-PEST分析
  • USC安防平台之元数据检索
  • USC安防平台之地图临近资源列表
  • directx12 3d+vs2022游戏开发第六章 笔记十一
  • 核货宝助力连锁门店订货数字化转型升级
  • rust笔记7-生命周期显式标注
  • LLaMA中的微调方法
  • VSCode ssh远程连接内网服务器(不能上网的内网环境的Linux服务器)的终极解决方案
  • 【Python爬虫(50)】从0到1:打造分布式爬虫项目全攻略
  • mysql之Innodb数据页