如何在 flutter 應用程序中進行相對布局

Question

請看這張圖片 - https://ibb.co/YpjJsLZ

在上圖中，如何將漢堡圖像放置到白色視圖的中心。 我嘗試使用Align & Center小部件，但它不適合。

相對布局如何在 flutter 中工作？

Answer 1

Flutter 沒有像 android 這樣的布局類型，

但是您可以使用堆棧小部件放置漢堡圖像。

您可以按照本教程進行參考。

Answer 2

您不能在 Flutter 中使用相對布局，但它使用“堆棧”替換。

堆棧是 Flutter 中的一個小部件，其中包含一個小部件列表並將它們放在另一個之上。

stack 允許開發人員將多個小部件重疊到一個屏幕中並從下到上呈現它們。

因此，第一個小部件是最底部的項目，最后一個小部件是最頂部的項目。

import 'package:flutter/material.dart';

class StackWidget extends StatefulWidget {
  @override
  _StackWidgetState createState() => _StackWidgetState();
}

class _StackWidgetState extends State<StackWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.yellow,
      height: 300,
      child: Stack(
        alignment: Alignment.topLeft,
        children: [
          Container(
            color: Colors.cyan,
            width: 200,
            height: 200,
          ),
          Container(
            color: Colors.red,
            width: 150,
            height: 150,
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
        ],
      ),
    );
  }
}

Output：

完成☻♥。