解密Flutter回應式布局

Image for post

Flutter是一個跨平臺的應用開發框架，支持各種螢屏大小的設備，它可以在智能手表這樣的小設備上運行，也可以在電視這樣的大設備上運行，使用相同的代碼來適應不同的螢屏大小和像素密度是一個挑戰，

Flutter回應式布局的設計沒有硬性的規則，在本文中，我將向您展示在設計回應式布局時可以遵循的一些方法，

在使用Flutter構建回應式布局之前，我想說明一下Android和iOS是如何處理不同螢屏大小的布局的，

Android的方法

為了處理不同的螢屏尺寸和像素密度，在Android中使用了以下概念:

1. ConstraintLayout

Android UI設計中引入的一個革命性的東西是ConstraintLayout，它可以用于創建靈活的、回應性強的UI設計，以適應不同的螢屏大小和尺寸，它允許您根據與布局中其他視圖的空間關系來指定每個視圖的位置和大小，

但這并不能解決大型設備的問題，在大型設備中，拉伸或只是調整UI組件的大小并不是利用螢屏面積的最優雅的方式，在螢屏面積很小的智能手表，調整組件以適應螢屏大小可能會導致奇怪的UI，

2. Alternative layouts

要解決上述問題，您可以為不同大小的設備使用alternative layouts，例如，你可以在平板電腦等設備上使用分屏視圖來提供良好的用戶體驗，并明智地使用大螢屏，

Image for post

在Android中，你可以為不同的螢屏大小定義不同的布局檔案，Android框架會根據設備的螢屏大小自動處理這些布局之間的切換，

3. Fragments

使用Fragment，你可以將你的UI邏輯提取到單獨的組件中，這樣當你為大螢屏尺寸設計多窗格布局時，你不必單獨定義邏輯，您可以重用為每個片段定義的Fragment，

4. Vector graphics

Vector graphics使用XML創建影像來定義路徑和顏色，而不是使用像素位圖，它可以縮放到任何大小，在Android中，你可以使用VectorDrawable來繪制任何型別的插圖，比如圖示，

iOS的方法

iOS用于定義回應式布局的方式如下

1. Auto Layout

Auto Layout可用于構建自適應界面，您可以在其中定義用于控制應用程式內容的規則（稱為約束），當檢測到某些環境變化（稱為特征）時，“Auto Layout”會根據指定的約束條件自動重新調整布局，

2. Size classes

Size類的特點是會根據其大小自動分配給內容區域， iOS 會根據內容區域的Size類別動態地進行布局調整，在iPad上，size類也適用，

3. 一些UI 組件

還有一些其他的UI嘴賤你可以用來在iOS上構建回應式UI，像UIStackView, UIViewController，和UISplitViewController，

Flutter是如何自適應的

即使你不是Android或iOS的開發者，到目前為止，你應該已經了解了這些平臺是如何處理回應式布局的，

在Android中，要在單個螢屏上顯示多個UI視圖，請使用Fragments，它們類似于可在應用程式的Activity中運行的可重用組件，

您可以在一個Activity中運行多個Fragment，但是不能在一個應用程式中同時運行多個Activity，

在iOS中，為了控制多個視圖控制器，使用了UISplitViewController，它在分層界面中管理子視圖控制器，

現在我們來到Flutter

Flutter引入了widget的概念，它們像積木一樣拼湊在一起構建應用程式畫面，

記住，在Flutter中，每個螢屏和整個應用程式也是一個widget!

widget本質上是可重用的，因此在Flutter中構建回應式布局時，您不需要學習任何其他概念，

Flutter的回應式概念

正如我前面所說的，我將討論開發回應式布局所需的重要概念，然后你來選擇使用什么樣的方式在你的APP上實作回應式布局，

1. MediaQuery

你可以使用MediaQuery來檢索螢屏的大小(寬度/高度)和方向(縱向/橫向)，

下面是例子

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    Orientation orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      body: Container(
        color: CustomColors.android,
        child: Center(
          child: Text(
            'View\n\n' +
                '[MediaQuery width]: ${screenSize.width.toStringAsFixed(2)}\n\n' +
                '[MediaQuery orientation]: $orientation',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
    );
  }
}

Image for post

2. LayoutBuilder

使用LayoutBuilder類，您可以獲得BoxConstraints物件，該物件可用于確定小部件的maxWidth和maxHeight，

請記住:MediaQuery和LayoutBuilder之間的主要區別在于，MediaQuery使用螢屏的完整背景關系，而不僅僅是特定小部件的大小，而LayoutBuilder可以確定特定小部件的最大寬度和高度，

下面是例子

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: Row(
        children: [
          Expanded(
            flex: 2,
            child: LayoutBuilder(
              builder: (context, constraints) => Container(
                color: CustomColors.android,
                child: Center(
                  child: Text(
                    'View 1\n\n' +
                        '[MediaQuery]:\n ${screenSize.width.toStringAsFixed(2)}\n\n' +
                        '[LayoutBuilder]:\n${constraints.maxWidth.toStringAsFixed(2)}',
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: LayoutBuilder(
              builder: (context, constraints) => Container(
                color: Colors.white,
                child: Center(
                  child: Text(
                    'View 2\n\n' +
                        '[MediaQuery]:\n ${screenSize.width.toStringAsFixed(2)}\n\n' +
                        '[LayoutBuilder]:\n${constraints.maxWidth.toStringAsFixed(2)}',
                    style: TextStyle(color: CustomColors.android, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Image for post
PS:當你在構建一個小部件，想知道他的寬度是多少時，使用這個組件，你可以根據子組件可用高/寬度來進行判斷，構建不同的布局

3. OrientationBuilder

要確定widget的當前方向，可以使用OrientationBuilder類，

記住:這與你使用MediaQuery檢索的設備方向不同，

下面是例子

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Orientation deviceOrientation = MediaQuery.of(context).orientation;

    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: CustomColors.android,
              child: OrientationBuilder(
                builder: (context, orientation) => Center(
                  child: Text(
                    'View 1\n\n' +
                        '[MediaQuery orientation]:\n$deviceOrientation\n\n' +
                        '[OrientationBuilder]:\n$orientation',
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: OrientationBuilder(
              builder: (context, orientation) => Container(
                color: Colors.white,
                child: Center(
                  child: Text(
                    'View 2\n\n' +
                        '[MediaQuery orientation]:\n$deviceOrientation\n\n' +
                        '[OrientationBuilder]:\n$orientation',
                    style: TextStyle(color: CustomColors.android, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Image for post

portrait (縱向) landscape（橫向）

PS：看了下OrientationBuilder的原始碼注釋

widget的方向僅僅是其寬度相對于高度的一個系數，如果一個[Column]部件的寬度超過了它的高度，它的方向是橫向的，即使它以垂直的形式顯示其子元素，

這是譯者的代碼

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// Copyright (C), 2020-2020, flutter_demo
/// FileName: orientationBuilder_demo
/// Author: Jack
/// Date: 2020/12/6
/// Description:

class OrientationBuilderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Orientation deviceOrientation = MediaQuery.of(context).orientation;

    return Scaffold(
      body: Column(
        children: [

          Expanded(
            flex: 1,
            child: Container(
              color: Colors.greenAccent,
              child: OrientationBuilder(
                builder: (context, orientation) => Center(
                  child: Text(
                    'View 1\n\n' +
                        '[MediaQuery orientation]:\n$deviceOrientation\n\n' +
                        '[OrientationBuilder]:\n$orientation',
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: OrientationBuilder(
              builder: (context, orientation) => Container(
                color: Colors.white,
                child: Center(
                  child: Text(
                    'View 2\n\n' +
                        '[MediaQuery orientation]:\n$deviceOrientation\n\n' +
                        '[OrientationBuilder]:\n$orientation',
                    style: TextStyle(color: Colors.greenAccent, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在這里插入圖片描述

想必你已經理解了OrientationBuilder的方向定義，如果一個小部件的寬大于高，他就是橫向的，如果高大于寬，他就是橫向的，僅此而已，

4. Expanded and Flexible

在Row或Column中特別有用的小部件是 Expanded 和 Flexible，當Expanded 使用在一個Row、Column或Flex中，Expanded 可以使它的子Widget自動填充可用空間，與之相反，Flexible 的子widget不會填滿整個可用空間，

例子如下，

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                ExpandedWidget(),
                FlexibleWidget(),
              ],
            ),
            Row(
              children: [
                ExpandedWidget(),
                ExpandedWidget(),
              ],
            ),
            Row(
              children: [
                FlexibleWidget(),
                FlexibleWidget(),
              ],
            ),
            Row(
              children: [
                FlexibleWidget(),
                ExpandedWidget(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class ExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: CustomColors.android,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Expanded',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

class FlexibleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Container(
        decoration: BoxDecoration(
          color: CustomColors.androidAccent,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Flexible',
            style: TextStyle(color: CustomColors.android, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Image for post

PS:與[expand]不同的是，[Flexible]不需要子widget填充剩余的空間，第一個例子，expanded雖然有填充空余空間的功能，不過expanded組件和flexible組件的flex都是1,相當于將縱軸分成兩半，expanded所擁有的全部空間就是縱軸的一半，實際他已經填充了，

5. FractionallySizedBox

FractionallySizedBox widget將其子元素的大小調整為可用空間的一小部分，它在Expanded 或Flexible widget中特別有用，

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 0.4),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 0.6),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 0.8),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FractionallySizedWidget(widthFactor: 1.0),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class FractionallySizedWidget extends StatelessWidget {
  final double widthFactor;
  FractionallySizedWidget({@required this.widthFactor});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: FractionallySizedBox(
        alignment: Alignment.centerLeft,
        widthFactor: widthFactor,
        child: Container(
          decoration: BoxDecoration(
            color: CustomColors.android,
            border: Border.all(color: Colors.white),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              '${widthFactor * 100}%',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

PS:當你想讓你的widget，占據當前螢屏寬度和高度的百分之多少時，使用這個組件，想在Row和Column組件中使用百分比布局時，需要在FractionallySizedBox外包裹一個expanded或flexible

6. AspectRatio

可以使用AspectRatio小部件將子元素的大小調整為特定的長寬比，首先，它嘗試布局約束允許的最大寬度，并通過將給定的高寬比應用于寬度來決定高度，

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            AspectRatioWidget(ratio: '16 / 9'),
            AspectRatioWidget(ratio: '3 / 2'),
          ],
        ),
      ),
    );
  }
}

class AspectRatioWidget extends StatelessWidget {
  final String ratio;

  AspectRatioWidget({@required this.ratio});

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: Fraction.fromString(ratio).toDouble(),
      child: Container(
        decoration: BoxDecoration(
          color: CustomColors.android,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(
            child: Text(
              'AspectRatio - $ratio',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

Image for post

我們已經研究了大多數重要的概念，為建立一個回應式布局Flutter app，除了最后一個，

在構建一個示例回應式應用程式時，讓我們學習最后一個概念，

創建一個回應式APP

現在，我們將應用上一節中描述的一些概念，與此同時，您還將學習為大螢屏構建布局的另一個重要概念，即分屏視圖(一個螢屏上顯示多個頁面)，

回應式布局：在不同大小的螢屏上使用不同的布局，
我們將建立一個名叫Flow的聊天應用程式，

app主要由兩個部分組成:

HomePage (PeopleView, BookmarkView, ContactView)
ChatPage (PeopleView, ChatView)

對于大螢屏，我們將顯示包含MenuWidget和DestinationView的分屏視圖，您可以看到，在Flutter中創建分屏視圖是非常容易的，您只需使用一行將它們并排放置，然后為了填滿整個空間，只需使用Expanded widget包裝兩個視圖，您還可以定義擴展小部件的flex屬性，這將允許您指定每個小部件應該覆寫螢屏的多少部分(默認flex設定為1)，

但是，如果您現在移動到一個特定的螢屏，然后在視圖之間切換，那么您將丟失頁面的背景關系，也就是說您將始侄訓傳到第一個頁面，即“聊天”，為了解決這個問題，我使用了多個回呼函式來回傳所選頁面到主頁，實際上，您應該使用狀態管理技術來處理此場景，由于本文的唯一目的是教您構建回應式布局，所以我不討論任何狀態管理的復雜性，

回應式APP Github地址感興趣的小伙伴可以看一看

上文中的所有布局組件的demo都在譯者的github上

地址https://github.com/jack0-0wu/flutter_demo

本文為medium翻譯

原文地址

https://medium.com/flutter-community/demystifying-responsive-layout-in-flutter-f85d0014b94e
坐而論道不如起而行之

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/230915.html

標籤：其他

上一篇：動態svg圖片簡單制作

下一篇：博客園寫作技巧-排版和seo優化

<譯>解密Flutter回應式布局

Android的方法

1. ConstraintLayout

2. Alternative layouts

3. Fragments

4. Vector graphics

iOS的方法

1. Auto Layout

2. Size classes

3. 一些UI 組件

Flutter是如何自適應的

Flutter的回應式概念

1. MediaQuery

2. LayoutBuilder

3. OrientationBuilder

4. Expanded and Flexible

5. FractionallySizedBox

6. AspectRatio

創建一個回應式APP