美文网首页Flutter圈子Flutter
跟我学企业级flutter项目:如何将你的项目简单并且快速屏幕自

跟我学企业级flutter项目:如何将你的项目简单并且快速屏幕自

作者: 王二蛋和他的狗 | 来源:发表于2022-05-16 16:23 被阅读0次

    前言

    你的flutter在小屏幕手机上出现文字丢失了么?
    你的flutter应用在小屏幕手机上排版出错了么?
    你的flutter应用在大屏幕手机上布局错乱了么?
    你在用flutter_screenutil做屏幕自适应么?
    今天我来给大家介绍一款简单不侵入代码的自适应。
    如果你有如下需求:

    1. 旧的flutter想快速屏幕适应各种手机
    2. 页面代码中不想增加关于适配屏幕的代码

    kg_density

    代码地址:https://github.com/smartbackme/KgDensity

    kg_density 是一个极简的屏幕适配方案,可以快速的帮助已经开发好的项目适配屏幕

    开始集成

    dependencies:
      kg_density: ^0.0.1
    

    以下机型来自 iphone5s

    登录适配之前


    img5.jpg

    登录适配之后

    img4.jpg

    图表页面适配之前

    img6.jpg

    图表页面适配之后

    img2.jpg

    其他页面适配之前


    img1.jpg

    其他页面适配之后

    img3.jpg

    使用方法:

    1. 创建 FlutterBinding
    
    class MyFlutterBinding extends WidgetsFlutterBinding with KgFlutterBinding {
    
      static WidgetsBinding ensureInitialized() {
        if (WidgetsBinding.instance == null) MyFlutterBinding();
        return WidgetsBinding.instance!;
      }
    }
    
    
    1. MaterialApp 配置
    
    MaterialApp(
                  ///定义主题
                  theme: ThemeData(),
                  builder: KgDensity.initSize(),
    
                );
    
    
    1. 启动前的配置
    
        void main() {
          ///初始化
          KgDensity.initKgDensity(375);
          MyFlutterBinding.ensureInitialized();
          ///运行
          runApp(App());
        }
    
    

    注意说明:

    1. KgDensity.initSize(builder: ??)

    为了方便其他builder配置,代码中专门增加其他builder

    使用方法

        builder: KgDensity.initSize(builder: EasyLoading.init()),
    
    
    1. KgDensity.initKgDensity(375)

    数字配置的是按照设计稿件的最窄边来配置的

    若不使用KgDensity 进行适配,请不要init

    1. 正确获取size
        MediaQuery.of(context).size
    
    

    请不要使用 window.physicalSize,MediaQueryData.fromWindow(window)

    相关文章

      网友评论

        本文标题:跟我学企业级flutter项目:如何将你的项目简单并且快速屏幕自

        本文链接:https://www.haomeiwen.com/subject/tddwurtx.html