日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

詳解如何在Flutter中用小部件創建響應式布局_Android

作者：尼耳多 ? 更新時間： 2022-04-27 編程語言

構建響應式屏幕布局意味著編寫一段代碼，以響應設備布局的各種變化，因此應用程序會根據設備的屏幕尺寸和形狀顯示其UI。

在這篇文章中，我們將探討Flutter中用于屏幕響應的擴展和靈活部件。

由于Flutter的跨平臺、單一代碼庫的能力，了解屏幕管理以防止像柔性溢出錯誤或糟糕的用戶界面設計這樣的問題是至關重要的。

我們還將設計一個擴展和靈活部件的演示，并描述它們的屬性以及如何在Flutter應用程序中使用它們。

前提條件

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

  • 在您的本地機器上安裝Flutter
  • 具有Flutter和Dart的工作知識

使用容器的問題

在Flutter中，一個容器是一個包含多個子小部件的父小部件。它通過寬度、高度、背景顏色和填充以及其他描述符來管理它們。基本上，一個容器是一個盒子，我們可以把內容傳進去。

有兩個原因可以說明為什么在Flutter中使用容器來創建一個響應式的屏幕布局是不可取的。

首先是RenderFlex的溢出。這是最經常遇到的Flutter框架錯誤之一；當它發生時，你會看到黃色和黑色的條紋，指示應用程序UI中的溢出區域，此外還有調試控制臺的錯誤信息。

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

這兩個問題都可以使用 "靈活 "或 "擴展 "小組件來解決，提供更好的UI和開發體驗。

展開式小組件的介紹

擴展小組件是一個單子小組件，意味著只能給它分配一個子項。為了更好地優化，它被用在行或列中。

擴展小組件的屬性包括child 小組件和flex 小組件。

child 小組件被放置在一個擴展的小組件內，它可以收進行和列。Flex 被用來不均勻地分配child 小組件的內容。

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

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

靈活小組件的介紹

靈活小組件與 "擴展 "小組件相當相似，但顯著的區別在于其屬性。靈活小組件用于調整孩子在屏幕中的內容位置。

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

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

就像在 "擴展 "小組件中，flex 被用來不均勻地分配子小組件的內容。

下面的代碼使用了一個Flexible widget，其flex 被設置為1 ，適合作為FlexFit.loose ，以及一個具有常規功能的子容器。

Flexible(
   flex: 1,
   fit: FlexFit.loose,
   child: Container(
   height: 100,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(15),
      color: Colors.deepOrange[400],
      ),
    child:Icon(Icons.backpack),
 ),
),

設置一個示例應用程序

在這個演示中，我們將創建一個Flutter示例應用程序，其布局是以行和列顯示的內容。

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

讓我們先創建一個Flutter項目目錄；在你的終端輸入以下命令。

mkdir FlutterApps

接下來，創建一個Flutter項目。

flutter create sample_app

現在，在您選擇的任何代碼編輯器中打開Flutter項目。

代碼執行

將以下代碼粘貼到main.dart 文件中。我們首先創建一個名為homepage 的有狀態部件。

在homepage ，我們將創建兩個按鈕，將我們引向兩個不同的屏幕，以看到在屏幕布局中使用擴展和靈活部件的區別。

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"))),
 )
])));

創建的按鈕是簡單的容器，里面有一些decoration 、color 、text 小部件，用一個手勢檢測器包裹起來，使我們能夠使用onTap 屬性來引導到ExpandedWidget() 和FlexibleWidget() 屏幕。

擴展的小部件例子

首先，創建一個名為expanded.dart 的文件。

touch expanded.dart

接下來，將以下代碼粘貼到文件中。在代碼中，我們創建了一個無狀態的小部件，以使用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 ，我們創建了一個返回按鈕，這樣我們就可以返回到前一個屏幕。

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

下面的圖片顯示了應用和不應用flex 的布局。

靈活部件的例子

首先，創建一個名為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),
           ),
          )
         ],
        )
       ],
      )
     ],
    ),
   ),
  );
 }
}

在代碼中，我們創建了一個無狀態的小部件，FlexibleWidget 。在它里面，我們創建了兩行靈活部件的內容。在第一行，我們使用flexfit.loose ，在第二行，我們使用flexfit.tight 。有了這個，圖標將填補孩子所提供的可用空間。

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

擴大的和靈活的部件之間的區別

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

總結

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

原文鏈接：https://juejin.cn/post/7067818615323492383

欄目分類
最近更新