Flutter之响应式UI和适配iPad方案

  八月又过了一半了，真心觉得日子飞逝。今天来聊聊在Flutter中如何做iPad和平板的适配。

一、Flutter适配iPad和平板的原理

  其实吧，在Flutter中适配各种尺寸像iPad、平板甚至现在Flutter可以支持web、Desktop之后，有更多的屏幕适配。试着想一想我们在ios、Android原生中怎么做的适配？

  首先，我们的知道屏幕是什么尺寸的，然后给不同尺寸的屏幕定义一个范围，如：手机屏幕在一个范围内，pad在一个范围内。然后在获取当前的横竖屏状态，根据屏幕尺寸和横竖屏状态，给屏幕设置一个layout布局。

  其实，在Flutter中也一样。很多第三方库中设置了当屏幕最小边的范围小于600时就是手机屏幕。大于600就是pad...

< 600: mobile
600 < ScreenSize < 950: tablet
大于950: desktop

定义好标准后，第三方库做的无非就是定义一些widget wrapper，(包装类)。一些定义设置值得方法。仅此而已。

二、Flutter中的适配iPad和平板第三方库

  在pub.dev中有很多第三方适配

2.1 device_preview

  这个库虽然不是用来做iPad和平板适配功能的，但是它还挺有意思的。

引入库，这里就不多说了。在我们引入库之后，我们使用它包装Flutter App。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: DevicePreview.locale(context), // Add the locale here
      builder: DevicePreview.appBuilder, // Add the builder here
      home: HomePage(),
    );
  }
}

然后，在运行我们的App，之后再手机或者平板，最好我们运行在web上，现在flutter不是支持web了吗。我们就会看到类似这样的界面。

它帮我们生成了一个适配展示页面，我们可以选择不同的机型，然后它会对应生成在该机型上，我们的App会如何展示，还挺好玩的。大家可以试试：

image.png 1.jpg 2.jpg

有兴趣的可以去看看pub.dev上的介绍，挺有意思的。去试试吧~

2.2 breakpoint

breakpoint这个库，它定义了很多屏幕尺寸的范围，以及它为了适应不同屏幕尺寸，它也对相应的屏幕尺寸范围定义了很多附加的变量，比如说像gridview这种布局的有多少列，列与列之间的间距，padding，margin值有多少，等等。这些在不同尺寸范围下都是不同的。都是为了响应式布局。为了让布局在不同尺寸屏幕上看起来都很自然，不突兀。

image.png

使用的话，大家可以去看看pub.dev上的介绍，使用也很简单，但是呢，它只是提供了breakpoint的定义和重写，没有对widget进行一些封装wrapper。所以使用其他就显得不是很方便。

那有没有那种可以躺平的那种呢，简简单单，不用想事，调用哥widget一包装就搞定两套布局的呢？答案是肯定的！！

2.3 responsive_builder

2.3.1 默认和修改机型尺寸定义

这个库预定义了不同机型的尺寸范围：

  static const RefinedBreakpoints _defaultRefinedBreakPoints =
      const RefinedBreakpoints(
    // Desktop
    desktopExtraLarge: 4096,
    desktopLarge: 3840,
    desktopNormal: 1920,
    desktopSmall: 950,
    // Tablet
    tabletExtraLarge: 900,
    tabletLarge: 850,
    tabletNormal: 768,
    tabletSmall: 600,
    // Mobile
    mobileExtraLarge: 480,
    mobileLarge: 414,
    mobileNormal: 375,
    mobileSmall: 320,
  );

当然，你也可以根据自己的需求修改标准，可以单个页面修改也可以整个App修改：

全局Screen breakpoints修改：

void main() {
  ResponsiveSizingConfig.instance.setCustomBreakpoints(
    ScreenBreakpoints(desktop: 800, tablet: 550, watch: 200),
  );
  runApp(MyApp());
}

单个页面修改：

ScreenTypeLayout(
  breakpoints: ScreenBreakpoints(
    tablet: 600,
    desktop: 950,
    watch: 300
  ),
  mobile: Container(color:Colors.blue)
  tablet: Container(color: Colors.yellow),
  desktop: Container(color: Colors.red),
  watch: Container(color: Colors.purple),
);

2.3.2 在需要定义不同布局的地方使用ScreenTypeLayout

在responsive_builder库中，它帮我们定义了widget wrapper包装类，我们只需要调用ScreenTypeLayout，然后在不同分类中传入对应的布局，就可以在不同机型上完成布局的适配，有两种方式，mobile为必传布局

// Construct and pass in a widget per screen type
ScreenTypeLayout(
  mobile: Container(color:Colors.blue)
  tablet: Container(color: Colors.yellow),
  desktop: Container(color: Colors.red),
  watch: Container(color: Colors.purple),
);

// Construct and pass in a widget builder per screen type
ScreenTypeLayout.builder(
  mobile: (BuildContext context) => Container(color:Colors.blue),
  tablet: (BuildContext context) => Container(color:Colors.yellow),
  desktop: (BuildContext context) => Container(color:Colors.red),
  watch: (BuildContext context) => Container(color:Colors.purple),
);

因为它的库文件也比较少，如果说你需要适配iPad和table横竖屏，也就是说横屏样式和竖屏不一样，你也可以魔改一下，加一个tabletLandScape属性，想必这也不难。不要问为什么，偶就是这么玩的。💯

但是也可以这么玩，不需要魔改啦~

ScreenTypeLayout(
  mobile: OrientationLayoutBuilder(
      portrait: (context) => Container(color: Colors.green),
      landscape: (context) => Container(color: Colors.pink),
    ),
  tablet: OrientationLayoutBuilder(
      portrait: (context) => Container(color: Colors.green),
      landscape: (context) => Container(color: Colors.pink),
    ),
);

类似这种，加一个OrientationLayoutBuilder包装类，其实他就是自己帮你计算了横竖屏，并吧相应的布局传入而已。

2.3.2 如果说，我们并不是需要修改布局，仅仅是布局相同只是有些尺寸在不同屏幕上不同，间距不同而已。这里也提供了方法。

Container(
  padding: EdgeInsets.all(getValueForScreenType<double>(
     context: context,
     mobile: 10,
     tablet: 30,
     desktop: 60,
   )
),
  child: Text('Best Responsive Package'),
)

使用getValueForScreenType方法，设置不同机型的值。

这个库使用就这么简单了，系不系很简单？

2.4 responsive_framework

这个库呢，并没有定义像BreakPoint这些玩意，使用这个库后，它会自己计算当前屏幕，自动缩放页面的布局，使其页面显示效果更好，它不单单只是放大字体大小等，它会整体缩放。

image.png 22.jpg

它的原理：无非就是计算屏幕的宽高比，然后使用SizedBox包裹布局，并搭配FittedBox控件来做缩放。

具体的话，可以看看pub.dev上的介绍，可以搭配responsive_builder一起使用。

三、响应式布局widget使用

3.1 Android 中的响应式

  像在Android中用来做响应式布局的有ConstraintLayout约束布局、Fragments、Svg图等来适配不同屏幕尺寸

3.2 iOS 中的响应式

  而在iOS中用来做响应式布局的有Auto Layou、Size Classes、UIStackView等

3.3 Flutter中的响应式控件

  在Flutter中响应式也有很多：MediaQuery(可以获取屏幕尺寸，屏幕的横竖屏状态)、LayoutBuilder、OrientationBuilder、Expanded和Flexible、FractionallySizedBox、AspectRatio;

其原理无非就是获取屏幕区域的尺寸，横竖屏大小，尺寸不设置固定值使用比例等布局。
具体使用大家就看看这篇文章吧，写的很详细。
《How to build responsive layout in Flutter》

《Responsive layout grid》

四、结语

  在Flutter中，ipad或者平板适配与iOS和Android原生中适配大同小异，根据机型，横竖屏设置不同的屏幕布局和尺寸大小。

Ending...