此部落格適用於希望應用現有Android知識的Android開發人員使用Flutter構建移動應用程式。在這篇部落格中，我們將探討Flutter中FrameLayout的等效設計小部件。

原文：https://medium.com/flutter-community/flutter-for-android-developers-how-to-design-framelayout-in-flutter-93a19fc7e7a6

系列

• 如何在Flutter中設計Activity UI？
• 如何在Flutter中設計LinearLayout？
• 如何在Flutter中設計FrameLayout？（你在這裡）

先決條件

此部落格已假設您已在計算機中設定了顫振並能夠執行Hello World應用程式。如果您尚未安裝顫振，請從此處開始。

Dart基於面向物件的概念，因此作為android java開發人員，您將能夠輕鬆地捕獲dart。

讓我們開始吧

FrameLayout是開發Android Designs時經常使用的佈局之一。我們定義FrameLayout新增在堆疊中繪製的單個或多個子檢視，最近新增的子項位於頂部。下面展示了我們如何在Android中實現它。

https://stackoverflow.com/questions/25679369/what-does-framelayout-do

FrameLayout 在Android中主要用於兩種情況。

1. 在另一個子檢視的頂部繪製檢視，即以Stack的形式重疊檢視，最近新增的子項位於頂部。
2. 它被用作繪圖的容器Fragments。

Android的第二個原因是正確的，但是因為一切都是一個小部件，這就是為什麼這個概念Fragment不適用於顫動，而是我們使用小部件。

現在第一個用例非常明顯的設計。因此，顫動提供了一個行為相同的小部件FrameLayout。是的，我知道它的Stack小部件，因為我在第一個用例中使用了粗體字。

堆

堆疊將其子項相對於其框的邊緣定位。FrameLayout當你想以一種簡單的方式重疊幾個孩子時，這個類相當於並且它更有用，例如，有一些文字和一個影象，用漸變覆蓋，並在底部附加一個按鈕。

https://flutter.io/widgets/layout/

這就是我們在顫動中定義Stack的方式。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("FrameLayout"),
        ),
        body: new Container(
          constraints: new BoxConstraints.expand(),
          color: Colors.tealAccent,
          child: new Stack(
            children: [
              Container(
                height: 200.0,
                width: 200.0,
                color: Colors.red,
              ),
              Container(
                height: 150.0,
                width: 150.0,
                color: Colors.blue,
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color: Colors.green,
              ),
              Container(
                height: 50.0,
                width: 50.0,
                color: Colors.yellow,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以下是上述程式碼的輸出。

截圖1

正如我們所知，FrameLayout子檢視是以堆疊的形式繪製的，根據它們定義的順序，它是一個在另一個的頂部。第一個孩子將在底部，最後一個定義孩子將在頂部。

Stack小部件使用相同的概念。首先定義的子視窗小部件children:<Widget>[]將位於底部，最後一個專案children:<Widget>[]將位於頂部。

1. android:gravity

這是在父佈局中定義的，因為FrameLayout沒有android:gravity屬性，需要layout_gravity為每個子節點分配才能實現android:gravity行為。

但是Stack向前邁出了一步並且提供android:gravity了構建中的行為，這可以使用Stack.alignment屬性來實現，該屬性接受AlignmentDirectional具有預定義列舉的物件AlignmentDirectional.topStart ，AlignmentDirectional.center等等。

由於android:gravity在父佈局中定義，我們將在父級中定義Stack.alignment，這也是我們的Stack小部件。這是您在上面的示例中定義的方式。

child: new Stack(
  alignment: AlignmentDirectional.center,
  children: [
   ...//all your child widgets
  ],
)

預設情況下，AlignmentDirectional.topStart如果不為alignment屬性指定任何值，則需要執行此操作。您可以參考Screenshot-1我們未定義任何對齊值的位置，預設情況下將其與頂部起始角對齊。

關於顫動的美麗是有命名慣例，你可以弄清楚它是什麼意思。從alignment屬性列舉名稱，您可以識別它將要執行的操作。AlignmentDirectional.topStart將設定Stack小部件頂角的子視窗小部件，依此類推。這就是它與其他AlignmentDirectional值的關係。

頂部重力

中心引力

                                                                    Bottom gravity

注意 ：

1. 如果我們沒有為Stack定義任何大小，那麼它將採用其父大小即match_parent 。在上面的示例中，我們Container使用擴充套件使用BoxConstraints.expand()它以便它可以佔用所有可用空間，即在我們的情況下可以通過tealAccent顏色識別的整個螢幕。由於我們沒有定義任何大小，Stack因此它將與其父級即整個螢幕一樣大，而Stack.alignment屬性將根據我們的Container大小的堆疊大小工作。
2. 如果我們沒有Stack為父級定義任何大小，Stack那麼將從其可用子級中獲取最大大小，即wrap_content 。因此，Stack.alignment屬性將根據堆疊的大小對齊小部件。下面是我們BoxConstraints.expand()從中刪除約束時的輸出Container。

2. android：layout_gravity

android:layout_gravity是觀點的外部引力。指定檢視應觸及其父邊框的方向。這是我們大部分時間都在使用的FrameLayout。為了新增此行為Stack，您需要將子項包裝在Align與layout_gravityAndroid 中一樣的小部件中。這是您Align為每個孩子定義小部件的方式。

截圖2

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}


class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("FrameLayout"),
        ),
        body: new Container(
          color: Colors.tealAccent,
          child: new Stack(
            children: [
              Align(
                child: Container(
                  height: 200.0,
                  width: 200.0,
                  color: Colors.red,
                ),
                alignment: AlignmentDirectional.topStart,
              ),
              Align(
                child: Container(
                  height: 150.0,
                  width: 150.0,
                  color: Colors.blue,
                ),
                alignment: AlignmentDirectional.topEnd,
              ),
              Align(
                child: Container(
                  height: 100.0,
                  width: 100.0,
                  color: Colors.green,
                ),
                alignment: AlignmentDirectional.bottomStart,
              ),
              Align(
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.yellow,
                ),
                alignment: AlignmentDirectional.bottomEnd,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

根據上面的程式碼，我們使用Align.alignment屬性將子對齊在四個角上。如果我們沒有Stack使用Align視窗小部件定義任何大小，則預設情況下Stack會擴充套件到可用空間，即我們的情況下的整個螢幕，然後它將根據可用空間對齊視窗小部件，這就是為什麼我們能夠看到tealAccent沒有顏色的原因BoxConstraints.expand()。

讓我們在Green box小部件中使用Align.alignment屬性，看看它的外觀。

頂部對齊

中心路線

底部對齊

3.Positioned（定位）

現在，這是我們在Stack中獲得的獎金小部件。目前，沒有位置行為FrameLayout 。定位小部件只是一個小部件，可以控制a的子節點所在的Stack位置。要定義子視窗小部件的位置，Stack我們需要將子視窗包裝在Positioned視窗小部件中top，bottom left並right根據需要使用和屬性定義位置。

以下是定義定位小部件的示例程式碼。

截圖-3

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("FrameLayout"),
        ),
        body: new Container(
          constraints: BoxConstraints.expand(),
          color: Colors.tealAccent,
          child: new Stack(
            children: [
              Positioned(
                child: Container(
                  height: 200.0,
                  width: 200.0,
                  color: Colors.red,
                ),
                top: 10.0,
                left: 10.0,
              ),
              Positioned(
                child: Container(
                  height: 150.0,
                  width: 150.0,
                  color: Colors.blue,
                ),
                top: 30.0,
                right: 50.0,
              ),
              Positioned(
                child: Container(
                  height: 100.0,
                  width: 100.0,
                  color: Colors.green,
                ),
                bottom: 100.0,
                left: 30.0,
              ),
              Positioned(
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.yellow,
                ),
                bottom: 50.0,
                right: 100.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

從Screenshot-3輸出中，您可以看到小部件與給定位置對齊。您還可以定義Positioned小部件的寬度和高度。

結論

FrameLayout最常用於Android。使用widget Stack等附加功能可以輕鬆實現重疊小Positioned部件。希望在即將到來的部落格中涵蓋更多主題。我已經建立了一個示例應用程式來參考堆疊屬性FrameLayout。您可以單擊工具欄圖示以檢視PositionedWidget 的輸出。

如果您對想要在Flutter學習的Android主題有任何建議，請在評論中告訴我。

在這裡檢視flutter for android示例。

burhanrashid52 / FlutterForAndroidExample
這是我的部落格系列“Flutter For Android Developer”的示例應用程式，適用於希望申請的Android開發人員...github.com

謝謝 ！！！

如果您覺得這篇文章有幫助。請喜歡，分享和鼓掌，這樣其他人就會在Medium上看到這個。如果您有任何問題或建議，請在部落格上發表評論或在Twitter，GitHub或Reddit上點選我。

要獲得即將釋出的部落格的最新更新，您可以關注我的媒體，Twitter，GitHub或Reddit。