最簡單的方法，使您的應用程序響應所有屏幕大小(移動，平板電腦，桌面)。
我第一次使用“ Flutter”框架的經歷是開發一個物聯網網絡應用的移動版本。所以基本上，在創建 UI 時，我不擔心響應屏幕。這是因為我的應用程序只用于移動設備。
但是在我的第三個項目中，我的老板要求我幫助倉庫中的流程實現無紙化。我們希望簡化工人在監控貨物進出倉庫之前通常打印文件的過程。主要的要求是，倉庫應用程序應該用在平板設備上。因此，這是我第一次學習在 flutter 應用程序中為更大的屏幕制作小部件。
在學習了一些資源之后，我決定開發一個適用于所有設備的應用程序。工作人員可以在手機上安裝應用程序，也可以在倉庫的桌面上打開應用程序。這里有 3 個選項，我已經為你收集了如何在顫動應用程序響應布局。
三種方式:
- Dynamic Padding
- Layout Builder
- extension BuildContex
在這個博客中，我們將探索如何使你的應用程序布局適應你的屏幕的 3 個例子。好了，我們開始吧..。
1. Dynamic Padding
你可能認為這是沒有反應的，但這是處理寬屏的解決方案之一。它通過向父窗口小部件添加水平填充來工作。將根據屏幕寬度動態設置填充值。讓我們看看下面的代碼:
import 'package:flutter/material.dart';
class ResponsivePadding extends StatelessWidget {
final Widget child;
const ResponsivePadding({
Key? key,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: MediaQuery.of(context).size.width > 650
? EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width / 3.8)
: const EdgeInsets.all(0),
child: child,
);
}
}
您可以為上面的代碼創建一個新的文件和類。然后在需要限制屏幕寬度時使用它。所有您需要做的就是用 ResponsivePaddingwidget 包裝您的屏幕。
@override
Widget build(BuildContext context) {
return ResponsivePadding(
child: Scaffold()
....https://dartpad.dev/?id=49078a3c9643cb65febbece13ed54ee9
responsive padding
2. Layout Builder
LayoutBuilder: 構建一個小部件樹，該樹可以依賴于父小部件的大小。
顧名思義，此小部件將根據大小限制構建布局。與第一個不同的是，通過這種方式，我們將捕獲所有可能的屏幕大小，然后安排布局。假設我們有 3 種布局: 手機、平板電腦和桌面。在每種布局中，我們可以使用不同的小部件。我學習這種方式從 Youtube 的 Flutter 方式，你可以通過參考鏈接訪問視頻。讓我們先看看響應代碼。
在上面的代碼中，我們有一個 StatelessWidget 并返回一個 LayoutBuilder。如你所見，我們有 3 個約束寬度。您可以根據需要進行修改。
實例:
- 移動布局: 由于寬度很小，我想在一個列中顯示內容，所以我將向下滾動查看所有的內容
- 平板電腦: 屏幕比手機寬，我想組合行和列。
- 桌面: 對于桌面大小，我認為一行顯示所有內容就足夠了。我還改變了每個孩子的寬度。
我們可以像下面的代碼那樣使用它:
@override
Widget build(BuildContext context) {
return Responsive(
mobile: mobileWidget,
tablet: tabletWidget,
desktop: desktopWidget,
);
}https://dartpad.dev/?id=027bc67ac129aed523e58e44c647b3c1
layout builder
現在我們有 3 個不同的布局取決于屏幕大小。您可以為每個布局創建自定義小部件。這樣，當應用程序在你的手機、平板電腦或桌面上打開時，它們都有自己適當的外觀。
3. Extension BuildContext
好吧，這是一個相當中等的水平，但非常體面，易于使用。因為我們將使用一個來自 flutter 的擴展方法和一個通用函數。讓我們從定義開始。
泛型函數是用類型參數聲明的函數。調用時，使用實際類型而不是類型參數。 https://learn.microsoft.com/en-us/cpp/extensions/generic-functions-cpp-cli?view=msvc-170
對于泛型函數，我們可以根據聲明的類型使用函數。所以會更有活力。在 dartlang 中，當類型 聲明一個類或函數時，我們通常會遇到這種情況。
Dart 2.7 中引入的擴展方法是向現有庫添加功能的一種方法 https://dart.dev/guides/language/extension-methods
現在我們可以為當前框架創建新的函數。
我們有 BuildContext。眾所周知，BuildContext 處理小部件在小部件樹中的位置。那么..。我們將在所有的小部件樹中有一個上下文。如果沒有上下文，則不會呈現小部件。
現在我們將為 BuildContext 創建一個擴展方法來執行 Responsive 布局:
extension Responsive on BuildContext {
T responsive<T>(
T defaultVal, {
T? sm,
T? md,
T? lg,
T? xl,
}) {
final wd = MediaQuery.of(this).size.width;
return wd >= 1280
? (xl ?? lg ?? md ?? sm ?? defaultVal)
: wd >= 1024
? (lg ?? md ?? sm ?? defaultVal)
: wd >= 768
? (md ?? sm ?? defaultVal)
: wd >= 640
? (sm ?? defaultVal)
: defaultVal;
}
}使用這段代碼，我們可以得到與 LayoutBuilder 相同的結果，但是代碼更簡單。
@override
Widget build(BuildContext context) {
return Container(
child: context.responsive<Widget>(
mobileWidget, // default
md: tabletWidget, // medium
lg: desktopWidget, // large
),
);
}https://dartpad.dev/?id=59656d666468db4c86d2c71362c6dcb4
正如我之前所說，這個方法是通用的，我們可以定義一個函數來返回一個數字或者其他什么。讓我們試試下面的例子。我們何時以及如何使用它。
另一個在“ flutter”中使用網格視圖的例子
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: context.responsive<int>(
2, // default
sm: 2, // small
md: 3, // medium
lg: 4, // large
xl: 5, // extra large screen
),
.......
響應式網格視圖響應式網格視圖
https://dartpad.dev/?id=925bbdc793dc6b529cb07eb636338ac9
好了，這是 3 種方法，使您的 Flutter 應用程序有一個響應布局。您可以根據需要更改斷點值。
