Flutter 中的响应式框架

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-leEY3B8W-1627347048021)(https://ducafecat.tech/2021/07/27/translation/responsive-framework-in-flutter/2021-07-27-08-38-56.png)]

猫哥说

这是个自动管理响应界面处理的组件，比较适合在 flutter web 的项目中。

自动管理了你的 Resizing、最大、最小尺寸、Scaling 缩放比例，但是我没有发现布局的控制，但是这已经很不错了，又可以少写代码了。

• 最小尺寸效果

https://gallery.codelessly.com/flutterwebsites/minimal/?utm_medium=link&utm_campaign=demo#/

• Flutter.dev 官网

https://gallery.codelessly.com/flutterwebsites/flutterwebsite/?utm_medium=link&utm_campaign=demo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UFVEiV3v-1627347048022)(https://ducafecat.tech/2021/07/27/translation/responsive-framework-in-flutter/2021-07-27-08-30-34.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OonfqJNJ-1627347048024)(https://ducafecat.tech/2021/07/27/translation/responsive-framework-in-flutter/2021-07-27-08-31-01.png)]

老铁记得 转发 ，猫哥会呈现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/404904528

原文

https://medium.com/flutterdevs/responsive-framework-in-flutter-74b8b2a360a9

代码

https://github.com/ducafecat/getx_quick_start

参考

• https://pub.dev/packages/responsive_framework

正文

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a9FvIwpg-1627347048024)(https://ducafecat.tech/2021/07/27/translation/responsive-framework-in-flutter/2021-07-27-08-14-15.png)]

Flutter 是 Google 的用户界面工具宝库，用于从一个代码库生成优秀的、本地编译的 iOS 和 Android 应用程序。为了构建任何应用程序，我们从小部件开始ー Flutter 应用程序的构建方块。窗口小部件根据当前的设计和状态描述他们的视图应该类似的内容。它整合了一个文本小部件、行小部件、列小部件、容器小部件等等。

本文利用 Flutter 响应框架软件包对 Flutter 响应框架进行了研究。有了软件包的帮助，我们可以很容易地实现一个响应屏幕。那么让我们开始吧。

响应式框架

响应式框架会自动调整你的用户界面以适应不同的屏幕尺寸。创建您的用户界面一次，并有它显示像素完美的移动，平板电脑和桌面！

支持多种显示大小通常意味着多次重新创建相同的布局。在传统的 Bootstrap 方法下，构建响应式 UI 是耗时、令人沮丧和重复的。此外，让一切像素完美几乎是不可能的，简单的编辑需要几个小时。

实施方案

• 第一步: 添加依赖项

将依赖项添加到 pubspec.yaml 文件。

依赖性:

dependencies:
  responsive_framework: ^0.1.4

• 第二步: 导入

import 'package:responsive_framework/responsive_framework.dart';

• 第三步: 启用 AndriodX

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

代码实现

你需要分别在你的代码中实现它

在创建类似于响应式框架的 UI 之前，我们在 main 的 Material 应用部件中添加了 ResponsiveWrapper.builder() 。文件中初始化 MaxWith，MinWith 和 Breakpoints 的 List 类型，在它内部调整设备的大小，如移动设备，平板电脑，桌面，并且自动缩放值是定义的，让我们理解它与下面的代码引用。

ResponsiveWrapper.builder(
    BouncingScrollWrapper.builder(context, widget!),
    maxWidth: 1200,
    minWidth: 450,
    defaultScale: true,
    breakpoints: [
      ResponsiveBreakpoint.resize(450, name: MOBILE),
      ResponsiveBreakpoint.autoScale(800, name: MOBILE),
      ResponsiveBreakpoint.autoScale(800, name: TABLET),
      ResponsiveBreakpoint.autoScale(1000, name: TABLET),
      ResponsiveBreakpoint.resize(1200, name: DESKTOP),
      ResponsiveBreakpoint.autoScale(2460, name: "4K"),
    ],
    background: Container(color: Color(0xFFF5F5F5))
  ),

自动缩放按比例缩小和扩展布局&#x