响应式框架

轻松实现 Flutter 应用的响应式。自动适应不同屏幕尺寸。响应式设计变得简单。

Screenshots

响应式设计，从未如此简单

响应式框架可自动将您的UI调整到不同的屏幕尺寸。只需创建一次UI，即可在手机、平板和桌面设备上呈现像素完美的显示效果！

问题

支持多种显示尺寸通常意味着需要多次重写相同的布局。在传统的Bootstrap方法下，构建响应式UI是耗时、令人沮丧且重复的。此外，要做到像素完美几乎不可能，简单的编辑也需要花费数小时。

Screenshots

解决方案

使用响应式框架自动缩放您的UI。

ResponsiveBreakpoint.autoScale(600);

演示

极简网站

一个用响应式框架构建的演示网站。查看代码

Flutter网站

用Flutter重现的flutter.dev网站。查看代码

快速入门

Pub release

将此库导入您的项目

responsive_framework: ^latest_version

将ResponsiveWrapper.builder添加到您的MaterialApp或CupertinoApp中。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
          child,
          maxWidth: 1200,
          minWidth: 480,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(480, name: MOBILE),
            ResponsiveBreakpoint.autoScale(800, name: TABLET),
            ResponsiveBreakpoint.resize(1000, name: DESKTOP),
          ],
          background: Container(color: Color(0xFFF5F5F5))),
      initialRoute: "/",
    );
  }
}

就是这样！

自动缩放

Screenshots

自动缩放可以按比例缩小和扩展您的布局，保持UI的精确外观。
这消除了手动调整布局以适应手机、平板和桌面的需要。

ResponsiveBreakpoint.autoScale(600);

Flutter的默认行为是resize（调整大小），响应式框架会尊重这一点。AutoScale默认是关闭的，可以通过将autoScale设置为true在断点处启用。

断点

Screenshots

断点控制不同屏幕尺寸下的响应式行为。

ResponsiveWrapper(
    child,
    breakpoints: [
        ResponsiveBreakpoint.resize(600, name: MOBILE),
        ResponsiveBreakpoint.autoScale(800, name: TABLET),
        ResponsiveBreakpoint.autoScale(1200, name: DESKTOP),
    ],
)

断点为您提供了对UI显示方式的精细控制。

入门概念

这些概念可以帮助您开始使用响应式框架并快速构建响应式应用程序。

缩放与调整大小

Flutter的默认行为是在屏幕尺寸改变时调整布局大小。调整布局大小会将其拉伸到未约束的宽度或高度方向。任何受约束的尺寸都保持固定，这就是为什么手机应用UI在桌面端看起来很小的原因。下面的示例说明了调整大小和缩放之间的区别。

Screenshots

AppBar小部件在手机上看起来是正确的。然而，当在桌面上查看时，AppBar太短，标题看起来太小。
每种行为下会发生什么

  1. 调整大小（默认）- AppBar的宽度为double.infinity，因此它会拉伸以填充可用宽度。工具栏的高度固定为56dp。
  2. 缩放 - AppBar的宽度拉伸以填充可用宽度。高度会根据最近的ResponsiveBreakpoint自动计算的纵横比进行比例缩放。随着宽度的增加，高度也按比例增加。

缩放后，AppBar在桌面上看起来是正确的，直到达到一定尺寸。一旦屏幕变得太宽，AppBar就会显得太大了。这时就需要断点。

断点配置

为了适应各种屏幕尺寸，请设置断点来控制响应式行为。

ResponsiveWrapper(
    child,
    maxWidth: 1200,
    minWidth: 480,
    defaultScale: true,
    breakpoints: [
        ResponsiveBreakpoint.resize(480, name: MOBILE),
        ResponsiveBreakpoint.autoScale(800, name: TABLET),
        ResponsiveBreakpoint.resize(1000, name: DESKTOP),
        ResponsiveBreakpoint.autoScale(2460, name: '4K'),
    ],
)

可以设置任意数量的断点。可以混合搭配调整大小/缩放行为。

  • 480以下：在小屏幕上调整大小，以避免拥挤和溢出错误。
  • 480-800：在手机上调整大小，以获得原生小部件尺寸。
  • 800-1000：在平板上缩放，以避免元素显得太小。
  • 1000+：在桌面上调整大小，以利用可用空间。
  • 2460+：在超大4K显示器上缩放，以保持文本可读，并且小部件不会间隔太远。

关于

响应式框架的诞生源于对更好的响应式管理方式的渴望。能够自动将UI适应不同尺寸的能力打开了无限的可能性。在Codelessly，我们正在构建一个Flutter应用UI和网站构建器、开发工具以及UI模板，以提高生产力。如果这听起来很有趣，您一定想订阅下面的更新？

响应式框架采用零条款BSD许可证，并作为电子邮件软件发布。如果您喜欢这个项目或它对您有所帮助，请订阅更新。虽然不是必需的，但您可能会错过我们分享的精彩内容！

徽章？

现在，您可以使用支持者徽章自豪地展示使用响应式框架节省的时间和精力。

Pub release

[![Flutter Responsive](https://img.shields.io/badge/flutter-responsive-brightgreen.svg?style=flat-square)](https://github.com/Codelessly/ResponsiveFramework)
Built Responsive 
<a href="https://github.com/Codelessly/ResponsiveFramework">
  <img alt="Built Responsive"
       src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20Responsive%20Badge.png"/>
</a>
Built with Responsive Framework 
<a href="https://github.com/Codelessly/ResponsiveFramework">
  <img alt="Built with Responsive Framework"
       src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20with%20Responsive%20Badge.png"/>
</a>

GitHub

https://github.com/Codelessly/ResponsiveFramework