詳解如何在Flutter中用小部件創(chuàng)建響應(yīng)式布局
構(gòu)建響應(yīng)式屏幕布局意味著編寫一段代碼，以響應(yīng)設(shè)備布局的各種變化，因此應(yīng)用程序會根據(jù)設(shè)備的屏幕尺寸和形狀顯示其UI。
在這篇文章中，我們將探討Flutter中用于屏幕響應(yīng)的擴(kuò)展和靈活部件。
由于Flutter的跨平臺、單一代碼庫的能力，了解屏幕管理以防止像柔性溢出錯誤或糟糕的用戶界面設(shè)計這樣的問題是至關(guān)重要的。
我們還將設(shè)計一個擴(kuò)展和靈活部件的演示，并描述它們的屬性以及如何在Flutter應(yīng)用程序中使用它們。
前提條件
為了理解和跟上本教程，您應(yīng)該具備以下條件。
- 在您的本地機(jī)器上安裝Flutter
- 具有Flutter和Dart的工作知識
使用容器的問題
在Flutter中，一個容器是一個包含多個子小部件的父小部件。它通過寬度、高度、背景顏色和填充以及其他描述符來管理它們?；旧希粋€容器是一個盒子，我們可以把內(nèi)容傳進(jìn)去。
有兩個原因可以說明為什么在Flutter中使用容器來創(chuàng)建一個響應(yīng)式的屏幕布局是不可取的。
首先是RenderFlex的溢出。這是最經(jīng)常遇到的Flutter框架錯誤之一；當(dāng)它發(fā)生時，你會看到黃色和黑色的條紋，指示應(yīng)用程序UI中的溢出區(qū)域，此外還有調(diào)試控制臺的錯誤信息。
"大屏幕的內(nèi)容尺寸不足 "只是一個UI錯誤，由于Flutters的靈活性，內(nèi)容對于特定的屏幕來說太小或太大。
這兩個問題都可以使用 "靈活 "或 "擴(kuò)展 "小組件來解決，提供更好的UI和開發(fā)體驗。
展開式小組件的介紹
擴(kuò)展小組件是一個單子小組件，意味著只能給它分配一個子項。為了更好地優(yōu)化，它被用在行或列中。
擴(kuò)展小組件的屬性包括child 小組件和flex 小組件。
child 小組件被放置在一個擴(kuò)展的小組件內(nèi)，它可以收進(jìn)行和列。Flex 被用來不均勻地分配child 小組件的內(nèi)容。
在下面的代碼中，我們使用擴(kuò)大的小組件，將flex 設(shè)置為1 ，并使用一個普通的容器來顯示擴(kuò)大的小組件的效果和它的屬性。
Expanded( flex: 1, child: Container( color: Colors.red, ), ),
靈活小組件的介紹
靈活小組件與 "擴(kuò)展 "小組件相當(dāng)相似，但顯著的區(qū)別在于其屬性。靈活小組件用于調(diào)整孩子在屏幕中的內(nèi)容位置。
靈活部件的屬性包括fit 和flex 。
Fit 控制該屬性如何填充可用空間。它有兩個選項：FlexFit.Tight ，將其設(shè)置為填充可用空間，以及FlexFit.loose ，填充子小組件的剩余可用空間。
就像在 "擴(kuò)展 "小組件中，flex 被用來不均勻地分配子小組件的內(nèi)容。
下面的代碼使用了一個Flexible widget，其flex 被設(shè)置為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),
),
),
設(shè)置一個示例應(yīng)用程序
在這個演示中，我們將創(chuàng)建一個Flutter示例應(yīng)用程序，其布局是以行和列顯示的內(nèi)容。
這里有一個gif圖，展示了我們將在這篇文章中建立的演示應(yīng)用程序。
讓我們先創(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)建兩個按鈕，將我們引向兩個不同的屏幕，以看到在屏幕布局中使用擴(kuò)展和靈活部件的區(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 屬性來引導(dǎo)到ExpandedWidget() 和FlexibleWidget() 屏幕。
擴(kuò)展的小部件例子
首先，創(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 的擴(kuò)展部件和一個分配不同顏色的容器創(chuàng)建了一個行。
下面的圖片顯示了應(yīng)用和不應(yī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)建了兩行靈活部件的內(nèi)容。在第一行，我們使用flexfit.loose ，在第二行，我們使用flexfit.tight 。有了這個，圖標(biāo)將填補(bǔ)孩子所提供的可用空間。
下面的圖片顯示了這樣的布局，flexfit.loose ，使用了孩子提供的最小空間，flexfit.tight ，填補(bǔ)了孩子提供的可用空間。
擴(kuò)大的和靈活的部件之間的區(qū)別
就像我之前指出的那樣，這些小組件的主要區(qū)別在于它們的屬性。展開的小組件只有child 和flex 屬性，如果誤用的話，這可能是一個限制。相比之下，靈活的小組件有更多的屬性；這使得使用靈活，因此而得名。
總結(jié)
在這篇文章中，我們了解了使用 "擴(kuò)展 "和 "靈活 "小組件的響應(yīng)式屏幕布局。我們首先介紹了使用容器創(chuàng)建響應(yīng)式屏幕布局時必然會出現(xiàn)的潛在問題，然后介紹了解決方案：擴(kuò)展的和靈活的部件。我們介紹了它們的屬性、相似性、差異性，最重要的是，我們還介紹了一個實際操作的例子。
以上就是詳解如何在Flutter中用小部件創(chuàng)建響應(yīng)式布局的詳細(xì)內(nèi)容，更多關(guān)于Flutter響應(yīng)式布局的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android通過訪問網(wǎng)頁查看網(wǎng)頁源碼實例詳解
這篇文章主要介紹了Android通過訪問網(wǎng)頁查看網(wǎng)頁源碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Android 中的 XRecyclerview的使用案例,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
Android基于虹軟(ArcSoft)實現(xiàn)人臉識別
人工智能時代快速來臨，其中人臉識別是當(dāng)前比較熱門的技術(shù)，在國內(nèi)也越來越多的運用，例如刷臉打卡，刷臉APP，身份識別，人臉門禁等。本文將為大家介紹Android基于虹軟(ArcSoft)實現(xiàn)人臉識別的demo，快來跟隨小編一起學(xué)習(xí)吧2021-12-12
這篇文章主要為大家詳細(xì)介紹了Android自定義圓形進(jìn)度條的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
android 通過向viewpage中添加listview來完成滑動效果(類似于qq滑動界面)
android 通過向viewpage中添加listview來完成滑動效果(類似于qq滑動界面)，需要的朋友可以參考一下2013-05-05
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)手機(jī)震動效果的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
Android開發(fā)的四大組件分別是：活動（activity），用于表現(xiàn)功能；服務(wù)（service），后臺運行服務(wù)，不提供界面呈現(xiàn)；廣播接受者（Broadcast Receive），勇于接收廣播；內(nèi)容提供者（Content Provider），支持多個應(yīng)用中存儲和讀取數(shù)據(jù)，相當(dāng)于數(shù)據(jù)庫，本篇著重介紹廣播組件2022-12-12
Android MotionEvent中g(shù)etX()和getRawX()的區(qū)別實例詳解
這篇文章主要介紹了Android MotionEvent中g(shù)etX()和getRawX()的區(qū)別實例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Android編程實現(xiàn)攝像頭臨摹效果的方法,涉及Android權(quán)限控制、布局及攝像頭功能調(diào)用等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Android應(yīng)用開發(fā)中硬件加速支持的使用方法,主要針對圖形繪制時的硬件加速與OpenGL調(diào)用,需要的朋友可以參考下2016-02-02