詳解如何在Flutter中用小部件創(chuàng)建響應式布局

更新時間：2022年02月24日 11:06:42 作者：尼耳多

由于Flutter的跨平臺、單一代碼庫的能力，了解屏幕管理以防止像柔性溢出錯誤或糟糕的用戶界面設計這樣的問題是至關重要的。本文將探討如何用靈活和擴展的小部件創(chuàng)建響應式布局，需要的可以參考一下

前提條件

為了理解和跟上本教程，您應該具備以下條件。

在您的本地機器上安裝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設計模式之單例模式解析
這篇文章主要為大家詳細介紹了Android設計模式之單例模式的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
Android apk安裝替換卸載廣播的實現(xiàn)代碼
以下代碼實現(xiàn)比較簡單，根據(jù)接收到的Action來判斷應用程序是安裝卸載還是被替換成其他版本，需要的朋友可以參考下
2013-07-07
Android中為activity創(chuàng)建菜單
這篇文章主要為大家詳細介紹了Android中為activity創(chuàng)建菜單的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Android 事件觸發(fā)機制的深入學習
這篇文章主要介紹了 Android 事件觸發(fā)機制的深入學習的相關資料,需要的朋友可以參考下
2017-06-06
Android 使用版本控制工具時添加忽略文件的方式(詳解)
下面小編就為大家?guī)硪黄狝ndroid 使用版本控制工具時添加忽略文件的方式(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
Android實現(xiàn)文字逐字顯示出來
這篇文章主要為大家詳細介紹了Android實現(xiàn)文字逐字顯示出來效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
Flutter狀態(tài)管理Provider的使用示例詳解
這篇文章主要為大家介紹了Flutter狀態(tài)管理Provider的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
Android開發(fā)筆記之:ListView刷新順序的問題詳解
本篇文章是對Android中ListView刷新順序的問題進行了詳細的分析介紹，需要的朋友參考下
2013-05-05
Android LayoutParams使用案例詳解
這篇文章主要介紹了Android LayoutParams使用案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-08-08
Android自定義View實現(xiàn)黑客帝國數(shù)字雨效果
這篇文章主要給大家介紹了關于Android自定義View實現(xiàn)黑客帝國數(shù)字雨效果的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧
2018-08-08