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

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

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

前提條件

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

在您的本地機(jī)器上安裝Flutter
具有Flutter和Dart的工作知識

使用容器的問題

在Flutter中，一個(gè)容器是一個(gè)包含多個(gè)子小部件的父小部件。它通過寬度、高度、背景顏色和填充以及其他描述符來管理它們?；旧?，一個(gè)容器是一個(gè)盒子，我們可以把內(nèi)容傳進(jìn)去。

有兩個(gè)原因可以說明為什么在Flutter中使用容器來創(chuàng)建一個(gè)響應(yīng)式的屏幕布局是不可取的。

首先是RenderFlex的溢出。這是最經(jīng)常遇到的Flutter框架錯(cuò)誤之一；當(dāng)它發(fā)生時(shí)，你會(huì)看到黃色和黑色的條紋，指示應(yīng)用程序UI中的溢出區(qū)域，此外還有調(diào)試控制臺的錯(cuò)誤信息。

"大屏幕的內(nèi)容尺寸不足 "只是一個(gè)UI錯(cuò)誤，由于Flutters的靈活性，內(nèi)容對于特定的屏幕來說太小或太大。

這兩個(gè)問題都可以使用 "靈活 "或 "擴(kuò)展 "小組件來解決，提供更好的UI和開發(fā)體驗(yàn)。

展開式小組件的介紹

擴(kuò)展小組件是一個(gè)單子小組件，意味著只能給它分配一個(gè)子項(xiàng)。為了更好地優(yōu)化，它被用在行或列中。

擴(kuò)展小組件的屬性包括child 小組件和flex 小組件。

child 小組件被放置在一個(gè)擴(kuò)展的小組件內(nèi)，它可以收進(jìn)行和列。Flex 被用來不均勻地分配child 小組件的內(nèi)容。

在下面的代碼中，我們使用擴(kuò)大的小組件，將flex 設(shè)置為1 ，并使用一個(gè)普通的容器來顯示擴(kuò)大的小組件的效果和它的屬性。

Expanded(
 flex: 1,
 child: Container(
 color: Colors.red,
 ),
),

靈活小組件的介紹

靈活小組件與 "擴(kuò)展 "小組件相當(dāng)相似，但顯著的區(qū)別在于其屬性。靈活小組件用于調(diào)整孩子在屏幕中的內(nèi)容位置。

靈活部件的屬性包括fit 和flex 。

Fit 控制該屬性如何填充可用空間。它有兩個(gè)選項(xiàng)：FlexFit.Tight ，將其設(shè)置為填充可用空間，以及FlexFit.loose ，填充子小組件的剩余可用空間。

就像在 "擴(kuò)展 "小組件中，flex 被用來不均勻地分配子小組件的內(nèi)容。

下面的代碼使用了一個(gè)Flexible widget，其flex 被設(shè)置為1 ，適合作為FlexFit.loose ，以及一個(gè)具有常規(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è)置一個(gè)示例應(yīng)用程序

在這個(gè)演示中，我們將創(chuàng)建一個(gè)Flutter示例應(yīng)用程序，其布局是以行和列顯示的內(nèi)容。

這里有一個(gè)gif圖，展示了我們將在這篇文章中建立的演示應(yīng)用程序。

讓我們先創(chuàng)建一個(gè)Flutter項(xiàng)目目錄；在你的終端輸入以下命令。

mkdir FlutterApps

接下來，創(chuàng)建一個(gè)Flutter項(xiàng)目。

flutter create sample_app

現(xiàn)在，在您選擇的任何代碼編輯器中打開Flutter項(xiàng)目。

代碼執(zhí)行

將以下代碼粘貼到main.dart 文件中。我們首先創(chuàng)建一個(gè)名為homepage 的有狀態(tài)部件。

在homepage ，我們將創(chuàng)建兩個(gè)按鈕，將我們引向兩個(gè)不同的屏幕，以看到在屏幕布局中使用擴(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 小部件，用一個(gè)手勢檢測器包裹起來，使我們能夠使用onTap 屬性來引導(dǎo)到ExpandedWidget() 和FlexibleWidget() 屏幕。

擴(kuò)展的小部件例子

首先，創(chuàng)建一個(gè)名為expanded.dart 的文件。

touch expanded.dart

接下來，將以下代碼粘貼到文件中。在代碼中，我們創(chuàng)建了一個(gè)無狀態(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,
             ),
            )
           ],
          ),
         ),
        ],
       ),
      ],
     ),
    ));
 }
}

首先，我們返回一個(gè)腳手架，以便我們可以使用appbar 和body 屬性。接下來，在appbar ，我們創(chuàng)建了一個(gè)返回按鈕，這樣我們就可以返回到前一個(gè)屏幕。

接著是正文，我們使用了兩列，一列在頂部，另一列在按鈕處將它們間隔開來；在每一列中，我們有一段文字描述它是有還是沒有flex 。在它下面，我們使用三個(gè)有或沒有flex 的擴(kuò)展部件和一個(gè)分配不同顏色的容器創(chuàng)建了一個(gè)行。

下面的圖片顯示了應(yīng)用和不應(yīng)用flex 的布局。

靈活部件的例子

首先，創(chuàng)建一個(gè)名為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)建了一個(gè)無狀態(tài)的小部件，FlexibleWidget 。在它里面，我們創(chuàng)建了兩行靈活部件的內(nèi)容。在第一行，我們使用flexfit.loose ，在第二行，我們使用flexfit.tight 。有了這個(gè)，圖標(biāo)將填補(bǔ)孩子所提供的可用空間。

下面的圖片顯示了這樣的布局，flexfit.loose ，使用了孩子提供的最小空間，flexfit.tight ，填補(bǔ)了孩子提供的可用空間。

擴(kuò)大的和靈活的部件之間的區(qū)別

就像我之前指出的那樣，這些小組件的主要區(qū)別在于它們的屬性。展開的小組件只有child 和flex 屬性，如果誤用的話，這可能是一個(gè)限制。相比之下，靈活的小組件有更多的屬性；這使得使用靈活，因此而得名。

總結(jié)

在這篇文章中，我們了解了使用 "擴(kuò)展 "和 "靈活 "小組件的響應(yīng)式屏幕布局。我們首先介紹了使用容器創(chuàng)建響應(yīng)式屏幕布局時(shí)必然會(huì)出現(xiàn)的潛在問題，然后介紹了解決方案：擴(kuò)展的和靈活的部件。我們介紹了它們的屬性、相似性、差異性，最重要的是，我們還介紹了一個(gè)實(shí)際操作的例子。

以上就是詳解如何在Flutter中用小部件創(chuàng)建響應(yīng)式布局的詳細(xì)內(nèi)容，更多關(guān)于Flutter響應(yīng)式布局的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: