詳解如何在Flutter中用小部件創(chuàng)建響應式布局
構建響應式屏幕布局意味著編寫一段代碼，以響應設備布局的各種變化，因此應用程序會根據(jù)設備的屏幕尺寸和形狀顯示其UI。
在這篇文章中，我們將探討Flutter中用于屏幕響應的擴展和靈活部件。
由于Flutter的跨平臺、單一代碼庫的能力，了解屏幕管理以防止像柔性溢出錯誤或糟糕的用戶界面設計這樣的問題是至關重要的。
我們還將設計一個擴展和靈活部件的演示，并描述它們的屬性以及如何在Flutter應用程序中使用它們。
前提條件
為了理解和跟上本教程，您應該具備以下條件。
- 在您的本地機器上安裝Flutter
- 具有Flutter和Dart的工作知識
使用容器的問題
在Flutter中，一個容器是一個包含多個子小部件的父小部件。它通過寬度、高度、背景顏色和填充以及其他描述符來管理它們。基本上，一個容器是一個盒子，我們可以把內容傳進去。
有兩個原因可以說明為什么在Flutter中使用容器來創(chuàng)建一個響應式的屏幕布局是不可取的。
首先是RenderFlex的溢出。這是最經常遇到的Flutter框架錯誤之一；當它發(fā)生時，你會看到黃色和黑色的條紋，指示應用程序UI中的溢出區(qū)域，此外還有調試控制臺的錯誤信息。
"大屏幕的內容尺寸不足 "只是一個UI錯誤，由于Flutters的靈活性，內容對于特定的屏幕來說太小或太大。
這兩個問題都可以使用 "靈活 "或 "擴展 "小組件來解決，提供更好的UI和開發(fā)體驗。
展開式小組件的介紹
擴展小組件是一個單子小組件，意味著只能給它分配一個子項。為了更好地優(yōu)化，它被用在行或列中。
擴展小組件的屬性包括child 小組件和flex 小組件。
child 小組件被放置在一個擴展的小組件內，它可以收進行和列。Flex 被用來不均勻地分配child 小組件的內容。
在下面的代碼中，我們使用擴大的小組件，將flex 設置為1 ，并使用一個普通的容器來顯示擴大的小組件的效果和它的屬性。
Expanded( flex: 1, child: Container( color: Colors.red, ), ),
靈活小組件的介紹
靈活小組件與 "擴展 "小組件相當相似，但顯著的區(qū)別在于其屬性。靈活小組件用于調整孩子在屏幕中的內容位置。
靈活部件的屬性包括fit 和flex 。
Fit 控制該屬性如何填充可用空間。它有兩個選項：FlexFit.Tight ，將其設置為填充可用空間，以及FlexFit.loose ，填充子小組件的剩余可用空間。
就像在 "擴展 "小組件中，flex 被用來不均勻地分配子小組件的內容。
下面的代碼使用了一個Flexible widget，其flex 被設置為1 ，適合作為FlexFit.loose ，以及一個具有常規(guī)功能的子容器。
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.deepOrange[400],
),
child:Icon(Icons.backpack),
),
),
設置一個示例應用程序
在這個演示中，我們將創(chuàng)建一個Flutter示例應用程序，其布局是以行和列顯示的內容。
這里有一個gif圖，展示了我們將在這篇文章中建立的演示應用程序。
讓我們先創(chuàng)建一個Flutter項目目錄；在你的終端輸入以下命令。
mkdir FlutterApps
接下來，創(chuàng)建一個Flutter項目。
flutter create sample_app
現(xiàn)在，在您選擇的任何代碼編輯器中打開Flutter項目。
代碼執(zhí)行
將以下代碼粘貼到main.dart 文件中。我們首先創(chuàng)建一個名為homepage 的有狀態(tài)部件。
在homepage ，我們將創(chuàng)建兩個按鈕，將我們引向兩個不同的屏幕，以看到在屏幕布局中使用擴展和靈活部件的區(qū)別。
Scaffold(
body: Center(
child:
Column(mainAxisAlignment: MainAxisAlignment.center, children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ExpandedWidget(),
),
);
},
child: Container(
height: 50,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), color: Colors.red),
child: Center(child: Text("Expanded Widget"))),
),
SizedBox(height: 100),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlexibleWidget(),
),
);
},
child: Container(
height: 50,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.teal[700]),
child: Center(child: Text("Flexible Widget"))),
)
])));
創(chuàng)建的按鈕是簡單的容器，里面有一些decoration 、color 、text 小部件，用一個手勢檢測器包裹起來，使我們能夠使用onTap 屬性來引導到ExpandedWidget() 和FlexibleWidget() 屏幕。
擴展的小部件例子
首先，創(chuàng)建一個名為expanded.dart 的文件。
touch expanded.dart
接下來，將以下代碼粘貼到文件中。在代碼中，我們創(chuàng)建了一個無狀態(tài)的小部件，以使用flex 屬性編寫我們的例子。
class ExpandedWidget extends StatelessWidget {
const ExpandedWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_ios_new)),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Text("With Flex"),
Container(
height: 100,
child: Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.deepOrange[400],
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.purpleAccent,
),
)
],
),
),
],
),
Column(
children: [
Text("Without Flex"),
Container(
height: 100,
child: Row(
children: [
Expanded(
child: Container(
color: Colors.red,
),
),
Expanded(
child: Container(
color: Colors.deepOrange[400],
),
),
Expanded(
child: Container(
color: Colors.purpleAccent,
),
)
],
),
),
],
),
],
),
));
}
}
首先，我們返回一個腳手架，以便我們可以使用appbar 和body 屬性。接下來，在appbar ，我們創(chuàng)建了一個返回按鈕，這樣我們就可以返回到前一個屏幕。
接著是正文，我們使用了兩列，一列在頂部，另一列在按鈕處將它們間隔開來；在每一列中，我們有一段文字描述它是有還是沒有flex 。在它下面，我們使用三個有或沒有flex 的擴展部件和一個分配不同顏色的容器創(chuàng)建了一個行。
下面的圖片顯示了應用和不應用flex 的布局。
靈活部件的例子
首先，創(chuàng)建一個名為flexible.dart 的文件。
touch flexible.dart
接下來，將以下代碼粘貼到文件中。
class FlexibleWidget extends StatelessWidget {
const FlexibleWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_ios_new)),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Text("Flexfit.loose"),
Row(
mainAxisAlignment:MainAxisAlignment.center,
children: [
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.deepOrange[400],
),
child:Icon(Icons.backpack),
),
),
SizedBox(
width: 10,
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.deepOrange[400],
),
child:Icon(Icons.backpack),
),
)
],
)
],
),
Column(
children: [
Text("Flexfit.tight"),
Row(
children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.purpleAccent,
),
child:Icon(Icons.backpack),
),
),
SizedBox(
width: 10,
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.purpleAccent,
),
child:Icon(Icons.backpack),
),
)
],
)
],
)
],
),
),
);
}
}
在代碼中，我們創(chuàng)建了一個無狀態(tài)的小部件，FlexibleWidget 。在它里面，我們創(chuàng)建了兩行靈活部件的內容。在第一行，我們使用flexfit.loose ，在第二行，我們使用flexfit.tight 。有了這個，圖標將填補孩子所提供的可用空間。
下面的圖片顯示了這樣的布局，flexfit.loose ，使用了孩子提供的最小空間，flexfit.tight ，填補了孩子提供的可用空間。
擴大的和靈活的部件之間的區(qū)別
就像我之前指出的那樣，這些小組件的主要區(qū)別在于它們的屬性。展開的小組件只有child 和flex 屬性，如果誤用的話，這可能是一個限制。相比之下，靈活的小組件有更多的屬性；這使得使用靈活，因此而得名。
總結
在這篇文章中，我們了解了使用 "擴展 "和 "靈活 "小組件的響應式屏幕布局。我們首先介紹了使用容器創(chuàng)建響應式屏幕布局時必然會出現(xiàn)的潛在問題，然后介紹了解決方案：擴展的和靈活的部件。我們介紹了它們的屬性、相似性、差異性，最重要的是，我們還介紹了一個實際操作的例子。
以上就是詳解如何在Flutter中用小部件創(chuàng)建響應式布局的詳細內容，更多關于Flutter響應式布局的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Android通過訪問網頁查看網頁源碼的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Android 中的 XRecyclerview的使用案例,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
Android基于虹軟(ArcSoft)實現(xiàn)人臉識別
人工智能時代快速來臨，其中人臉識別是當前比較熱門的技術，在國內也越來越多的運用，例如刷臉打卡，刷臉APP，身份識別，人臉門禁等。本文將為大家介紹Android基于虹軟(ArcSoft)實現(xiàn)人臉識別的demo，快來跟隨小編一起學習吧2021-12-12
這篇文章主要為大家詳細介紹了Android自定義圓形進度條的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
android 通過向viewpage中添加listview來完成滑動效果(類似于qq滑動界面)
android 通過向viewpage中添加listview來完成滑動效果(類似于qq滑動界面)，需要的朋友可以參考一下2013-05-05
這篇文章主要為大家詳細介紹了Android實現(xiàn)手機震動效果的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
Android開發(fā)的四大組件分別是：活動（activity），用于表現(xiàn)功能；服務（service），后臺運行服務，不提供界面呈現(xiàn)；廣播接受者（Broadcast Receive），勇于接收廣播；內容提供者（Content Provider），支持多個應用中存儲和讀取數(shù)據(jù)，相當于數(shù)據(jù)庫，本篇著重介紹廣播組件2022-12-12
Android MotionEvent中getX()和getRawX()的區(qū)別實例詳解
這篇文章主要介紹了Android MotionEvent中getX()和getRawX()的區(qū)別實例詳解的相關資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Android編程實現(xiàn)攝像頭臨摹效果的方法,涉及Android權限控制、布局及攝像頭功能調用等相關操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Android應用開發(fā)中硬件加速支持的使用方法,主要針對圖形繪制時的硬件加速與OpenGL調用,需要的朋友可以參考下2016-02-02