Flutter：将小部件的边缘与第二个小部件重叠

Question

我想将一个小部件的底部边缘与另一个小部件重叠，使其看起来像这样：

我正在使用堆栈将箭头按钮放在卡片上。 目前我只是在其上方设置了一个隐形框的位置。 问题是这种方法只适用于那个精确的分辨率——它应该与屏幕尺寸无关。

小部件的必要代码：

Stack(
 children: <Widget>[
  Container( //background
   height: 100,
   width: 100,
  ),
  FloatingActionButton(
   child: Icon(Icons.arrow_forward),
   onPressed: () {},
  )
 ],
)

Answer 1

更新 - 2021 年 4 月

您不能再在Stack小部件中使用overflow属性，因为它已被弃用。 请改用clipBehaviour 。 来源： Flutter 文档

您可以使用Stack和Positioned小部件来实现此 UI。

Stack(
  clipBehavior: Clip.none,
  children: <Widget>[
    Container(
      color: Colors.amber,
      height: 150,
      width: 150,
    ),
    Positioned(
      child: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          print('FAB tapped!');
        },
        backgroundColor: Colors.blueGrey,
      ),
      right: 0,
      left: 0,
      bottom: -26,
    ),
  ],
),

输出：

Answer 2

截至2019 年 11 月，我想添加第二个解决方案：

使用包： https : //pub.dev/packages/assorted_layout_widgets

var widget1 = ...;
var widget2 = ...;

ColumnSuper(  
  children: [widget1, widget2],    
  innerDistance: -26,
  );

从该解决方案使用一个的不同Stack是Positioned在一个小部件Stack不占用垂直空间。 但是， ColumnSuper将具有其所有子小部件的大小。 注意我是这个包的作者。