将一个小部件放置在另一个小部件上

Question

如下图所示定位小部件：（绿色覆盖红色。）

Answer 1

您可以使用Stack具有overflowof 属性的aOverflow.visible和 an alignmentof Alignemnt.center，以及Positioned具有负值的小部件bottom来实现您想要的。这是我为你写的一个片段，我试图模仿你分享的图像。如果您需要操作参数或进一步探索，您可以在 DartPad 上运行它。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          overflow: Overflow.visible,
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              height: 150,
              width: 300,
              color: Colors.red
            ),
            Positioned(
              bottom: -50,
              child: Container(
                height: 100,
                width: 150,
                color: Colors.green
              ),
            ),
          ],
        ),
      ),
    );
  }
}

它看起来是这样的：