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

Question

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

我正在使用堆栈将箭头按钮放在卡上。目前，我只是在位置上方设置了一个不可见的框。问题在于该方法仅适用于确切的分辨率-应该与屏幕尺寸无关。

窗口小部件的必需代码：

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

Answer 1

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

Stack(
  overflow: Overflow.visible,
  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将具有其所有子窗口小部件的大小。