Flutter之支持不一样的屏幕尺寸和方向

介绍

本文是medium的一篇文章的翻译，再加上本身的一点理解，已获得做者的赞成。

主要讲的是在平板和手机中，处理适配不一样屏幕的问题。

原文地址：medium.com/flutter-community/developing-for-multiple-screen-sizes-a nd-orientations-in-flutter-fragments-in-flutter-a4c51b849434

Android中解决大屏幕的方法

在Android中，咱们处理比较大尺寸的屏幕，例如平板电脑。咱们能够用过最小宽度限定符来定义相应尺寸的布局文件的名称。

这意味着咱们要去给一个布局文件用于手机，一个布局用于平板电脑。而后在运行的时候，根据设备，实例化相应的布局。而后咱们要去检查哪一个布局是active的，并进行相应的初始化操做。官方关于Android支持不一样屏幕尺寸的文档： developer.android.com/training/mu…

Android中的Fragment本质上是可重用的组件，能够在屏幕中使用。Fragment有本身的布局文件，而且 Java/Kotlin的类会去控制Fragment的生命周期。这是一项至关大的工做，须要大量代码才能开始工做。

下面，咱们先来看看在Flutter中处理屏幕方向，而后处理Flutter的屏幕尺寸。

在Flutter中使用方向

当咱们使用屏幕方向的时候，咱们但愿使用屏幕的所有宽度和显示尽量的最大信息量。

下面的示例，在两个方向上建立一个基本的配置文件页面，并根据不一样的方向去构建布局，以最大限度地使用屏幕宽度。

在这里，咱们有一个简单的屏幕，具备不一样的纵向和横向的布局。下面，咱们尝试经过建立上面的示例来了解 如何在Flutter中实现横竖屏切换布局。

如何解决这个问题

在概念上，解决方法跟Android的方法是相似的。咱们也要弄两个布局（这里的布局并非Android中的布局文件，由于在Flutter中 没有布局文件），一个用于纵向，一个用于横向。而后当设备的方向改变的时候，rebuild更新咱们的布局。

如何检测方向变化

Flutter中提供了一个OrientationBuilder的小部件。OrientationBuilder能够在设备的方向发生改变的时候，从新构建布局。

typedef OrientationWidgetBuilder = Widget Function(BuildContext context, Orientation orientation);
class OrientationBuilder extends StatelessWidget {
  /// Creates an orientation builder.
  const OrientationBuilder({
    Key key,
    @required this.builder,
  }) : assert(builder != null),
       super(key: key);

  /// Builds the widgets below this widget given this widget's orientation. /// A widget's orientation is simply a factor of its width relative to its
  /// height. For example, a [Column] widget will have a landscape orientation
  /// if its width exceeds its height, even though it displays its children in
  /// a vertical array.
  final OrientationWidgetBuilder builder;

  Widget _buildWithConstraints(BuildContext context, BoxConstraints constraints) {
    // If the constraints are fully unbounded (i.e., maxWidth and maxHeight are
    // both infinite), we prefer Orientation.portrait because its more common to
    // scroll vertically then horizontally.
    final Orientation orientation = constraints.maxWidth > constraints.maxHeight ? Orientation.landscape : Orientation.portrait;
    return builder(context, orientation);
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: _buildWithConstraints);
  }
}
复制代码

OrientationBuilder有一个builder函数来构建咱们的布局。当设备的方向发生改变的时候，就会调用 builder函数。orientation的值有两个，Orientation.landscape和Orientation.portrait。

@override
Widget build（BuildContext context）{
  return Scaffold（
    appBar：AppBar（），
    body：OrientationBuilder（
      builder :( context，orientation）{
        return orientation == Orientation. portrait
            ？_buildVerticalLayout（）
            ：_ buildHorizo​​ntalLayout（）;
      }，
    ），
  ）;
}
复制代码

在上面的例子中，咱们检查屏幕是否处于竖屏模式并构建竖屏的布局，不然咱们为屏幕构建横屏的布局。 _buildVerticalLayout（）和_buildHorizontalLayout（）是编写的用于建立相应布局的方法。

在Flutter中建立更大屏幕的布局

当咱们处理更大的屏幕尺寸的时候，咱们但愿屏幕适应地去使用屏幕上的可用空间。最直接的方法就是为平板电脑 和手机建立两种不一样的布局（这里的的布局，表示屏幕的可视部分）。然而，这里会涉及许多没必要要的代码，而且代码须要被重用。

那么咱们如何解决这个问题呢？

首先，让咱们来看看它最多见的用例。

这里讨论下“Master-Detail Flow”。对于应用程序来讲，你会看到一个常见的场景。其中有一个Master的列表，而后当你点击列表项Item的时候，就会跳到另外一个显示Detail详细信息的屏幕。以Gmail为例，咱们有一个电子邮件的列表，当咱们点击其中一个的时候， 会打开一个显示详细信息的页面，其中包含邮件内容。

让咱们为这个流程作一个示例的应用程序。

这个应用程序只保存一个数字列表，并在点击的时候，跳转到只显示一个数字的详细视图。

若是咱们在平板电脑中使用相同的布局，那将是一个至关大的空间浪费。那么咱们能够作些什么来解决它呢？ 咱们能够在同一屏幕上同时拥有主列表和详细视图，由于咱们有足够可用的屏幕空间。

那么咱们能够作些什么，来减小编写两个独立屏幕的工做呢？

先看看Android中是如何解决这个问题的。Android从主列表和详细信息视图中建立称为Fragment的可重用组件。 Fragment能够与屏幕分开定义，只是简单地将fragment添加到屏幕中而不是重复的两套代码。

所以FragmentA是显示主列表的fragment，FragmentB是显示详细信息的fragment。在较小宽度的布局中，单击列表项Item，会导航到单独的页面来显示详细视图FragmentB， 而在平板电脑中，fragmentB将跟fragmentA显示在同一屏幕上。

This is where the power of Flutter comes in.

Every widget in Flutter is by nature, reusable.

Every widget in Flutter is like a Fragment.

咱们须要作的就是定义两个Widget，一个用于显示主列表，一个用于显示详细视图。实际上，这些就是相似的fragments。

咱们只须要检查设备是否具备足够的宽度来处理列表视图和详细视图。若是是，咱们在同一屏幕上显示两个widget。若是设备没有足够的宽度来包含两个界面，那咱们只须要在屏幕中展现主列表，点击列表项后导航到独立的屏幕来显示详细视图。

首先，咱们须要检查设备的宽度，看看咱们是否可使用更大的布局，而不是使用更小的布局。 为了得到宽度，咱们使用MediaQuery来获取宽度，Size中的宽度和高度的单位是dp。

MediaQuery.of(context).size.width
复制代码

让咱们将最小宽度设置为600dp，以切换到第二种布局。

总结：

1. 咱们建立了两个Widget，一个包含主列表，一个显示详细视图
2. 咱们建立了两个屏幕，在第一个屏幕上，咱们检查设备是否具备足够的宽度来处理这两个小部件
3. 若是具备足够的宽度，咱们将在第一个页面上添加上两个Widget就好了。若是没有，咱们在第一个页面只添加主列表Widget， 在点击列表项以后导航到第二个屏幕上，显示详细视图的Widget。

代码实现

代码的实现我是用本身的代码进行说明，跟原做者的代码实现的思路和结果是同样的。 下面实现的是，有一个数字列表，点击后显示详细视图。

ListWidget

//须要定义一个回调，决定是在同一个屏幕上显示更改详细视图仍是在较小的屏幕上导航到不一样界面。
typedef Null ItemSelectedCallback(int value);
//列表的Widget
class ListWidget extends StatelessWidget {
  ItemSelectedCallback itemSelectedCallback;

  ListWidget({@required this.itemSelectedCallback});

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return new ListTile(
            title: new Text("$index"),
            onTap: () {
            //设置点击事件
              this.itemSelectedCallback(index);
            },
          );
        });
  }
}
复制代码

DetailWidget

//详细视图的Widget,简单的显示一个文本
class DetailWidget extends StatelessWidget {
  final int data;

  DetailWidget(this.data);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: new Center(
          child: new Text("详细视图:$data"),
        ),
      ),
    );
  }
}
复制代码

请注意，这些Widget不是屏幕，只是咱们将在屏幕上使用的小部件。

主屏幕

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLargeScreen; //是不是大屏幕

  var selectValue = 0; //保存选择的内容

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new OrientationBuilder(builder: (context, orientation) {
        print("width:${MediaQuery.of(context).size.width}");
        //判断屏幕宽度
        if (MediaQuery.of(context).size.width > 600) {
          isLargeScreen = true;
        } else {
          isLargeScreen = false;
        }
        //两个widget是放在一个Row中进行显示，若是是小屏幕的话，用一个空的Container进行占位
        //若是是大屏幕的话，则用Expanded进行屏幕的划分并显示详细视图
        return new Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Expanded(child: new ListWidget(
              itemSelectedCallback: (value) {
                //定义列表项的点击回调
                if (isLargeScreen) {
                  selectValue = value;
                  setState(() {});
                } else {
                  Navigator.of(context)
                      .push(new MaterialPageRoute(builder: (context) {
                    return new DetailWidget(value);
                  }));
                }
              },
            )),
            isLargeScreen
                ? new Expanded(child: new DetailWidget(selectValue))
                : new Container()
          ],
        );
      }),
    );
  }
}
复制代码

这是应用程序的主页面。有两个变量：selectedValue用于存储选定的列表项，isLargeScreen表示屏幕是否足够大。

这里还用了OrientatinBuilder包裹在最外面，因此当若是手机被旋转到横屏的时候，而且有足够的宽度来显示两个Widget的话，那它将以这种方式重建。(若是不须要这功能，那能够把OrientatinBuilder去掉就行)。

• 代码的主要部分是：

isLargeScreen
                ? new Expanded(child: new DetailWidget(selectValue))
                : new Container()
复制代码

若是isLargeScreen为true，则添加一个Expanded控件内部包裹DetailWidget。 Expanded容许每一个小部件经过设置Flex属性来填充屏幕。

若是isLargeScreen为false，则返回一个空的Container就好了，ListWidget所在的Expanded会自动填充满屏幕。

• 第二个重要部分是：

//定义列表项的点击回调
                if (isLargeScreen) {
                  selectValue = value;
                  setState(() {});
                } else {
                  Navigator.of(context)
                      .push(new MaterialPageRoute(builder: (context) {
                    return new DetailWidget(value);
                  }));
                }
复制代码

定义列表项的点击回调，若是屏幕较小，咱们须要导航到不一样的页面。若是屏幕较大，就不须要导航到不一样的屏幕，由于DetailWidget就在这个屏幕里面，只需调用setState()去刷新界面就行。

如今咱们有一个功能正常的应用程序，可以适应不一样大小的屏幕和方向。

一些更重要的事情

1. 若是只是想简单地拥有不一样的布局（按照个人理解，就是横屏竖屏的布局是彻底不同的，不须要去复用一部分代码）而没有相似Fragment的布局，那能够只能够直接在build方法中编写不一样的方法进行构建就行。

if (MediaQuery.of(context).size.width > 600) {
          isLargeScreen = true;
        } else {
          isLargeScreen = false;
        }
return isLargeScreen? _buildTabletLayout() : _buildMobileLayout();
复制代码

2. 若是只是想给平板电脑设计的应用程序，那不能直接检查MediaQurey的宽度来判断，而是须要获取Size并使用它来获取实际的宽度。在横屏的时候，width的值实际上是平板的长度，height的值实际上是平板的宽度。

Size size = MediaQuery.of(context).size;
double width = size.width > size.height ? size.height : size.width;
if(width > 600) {
  // Do something for tablets here
} else {
  // Do something for phones
}
复制代码

3. 强制横竖屏的操做:须要进行强制横屏或者竖屏，利用SystemChrome.setPreferredOrientations进行操做。

//强制竖屏
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);
  //强制横屏
   SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight
  ]);
复制代码

Github连接

本身也跟着原做者撸了下demo，顺便加了点注释，方便本身理解。

本身的Github连接：github.com/LXD31256949…

原做者的Github链接：github.com/deven98/Flu…