[Flutter翻譯]邁向Flutter Web的旅程第三部分：設計

Sunbreak發表於2021-06-02
FlutterWeb

原文地址：medium.com/flutter-cla…

原文作者：medium.com/@hiashutosh

釋出時間：2021年5月27日 - 3分鐘閱讀

image.png

如果您是直接來到這個頁面，請確保在開始這個頁面之前，您先通過走向Flutter Web的旅程：2。

在這篇文章中，我們將討論如何在保持單一程式碼庫的情況下，使應用程式在移動和網路上都能響應。

這裡有一些Flutter提供的用於構建響應式佈局的小工具。

  • 自定義單子佈局（CustomSingleChildLayout
  • 自定義多子版圖（CustomMultiChildLayout
  • 合適的盒子
  • 小數點陣圖（FractionallySizedBox
  • 佈局生成器
  • 媒體查詢
  • 媒體查詢資料
  • 方向構建器
  • 縱橫比

這些部件將幫助你使應用程式在不同尺寸的裝置上響應，但在每個裝置上的相同的使用者介面看起來並不直觀，如果你想在不同尺寸的裝置上顯示不同的使用者介面，該怎麼辦？

下面是Rally專案的響應式使用者介面的截圖，該專案在移動和桌面檢視上有不同的使用者介面。

image.png

拉力賽的桌面介面

image.png

拉力賽的手機版介面

因此，在這種情況下，你需要使用一個斷點，當裝置寬度超過或低於該斷點時，將改變UI，例如，如果我的斷點是700px，那麼當裝置寬度≤700時顯示移動UI，裝置寬度>700且裝置寬度<=1200時顯示平板UI，裝置寬度>1200時顯示桌面UI。

如果你不想定義自己的斷點，你可以使用這個包，它有很多斷點。

下面是如何通過一個輔助類來實現上述條件的。

import 'package:flutter/material.dart';

/// list of all devices
enum DeviceType {
  desktop,
  tablet,
  handset,
}

/// breakpoints for desktop, tablet and handset
final desktop = 1200;
final tablet = 900;
final handset = 600;

DeviceType _displayTypeOf(BuildContext context) {
  /// Use shortestSide to detect device type regardless of orientation
  double deviceWidth = MediaQuery.of(context).size.shortestSide;

  if (deviceWidth > desktop) {
    return DeviceType.desktop;
  }
  if (deviceWidth > tablet) {
    return DeviceType.tablet;
  } else {
    return DeviceType.handset;
  }
}

bool isDeviceDesktop(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.desktop;
}

bool isDeviceTab(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.tablet;
}

bool isDeviceMobile(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.handset;
}
複製程式碼

讓我們看看如何使用上面的輔助類。

Container(
  child: isDeviceDesktop(context)
      ? _buildDesktopUI()
      : isDeviceTab()
          ? _buildTabletUI()
          : _buildMobileUI(),
)
複製程式碼

請看這些例子專案以供參考。

  1. aqi_monitor
  2. flutter_gallery

如果你覺得這篇文章有用，請點選拍手圖示?，並與你的朋友分享，因為這將激勵我寫更多的文章。 如有任何關於Flutter的疑問，請隨時在社交媒體平臺上與我聯絡。

linktr.ee/hiahutoshsi…

通過www.DeepL.com/Translator（免費版）翻譯

相關文章