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

【问题标题】：Flutter: Overlap Edge of Widget with second WidgetFlutter：小部件的边缘与第二个小部件重叠
【发布时间】：2019-11-27 05:03:42
【问题描述】：

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

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

小部件的必要代码：

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

【问题讨论】：

标签： flutter

【解决方案1】：

更新 - 2021 年 4 月

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

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

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,
    ),
  ],
),

输出：

【讨论】：

哦，真的很简单。我不知道它也接受负值！
@ibhavikmakwana 如果我不想设置固定高度和宽度怎么办？那么它应该包装内容吗？
fab溢出部分无法点击，解决办法是什么
如果您可以分享一些代码 sn-p 或提出新问题，那将非常有帮助。
@ibhavikmakwana 感谢它在这里发布stackoverflow.com/q/62258640/10097848

【解决方案2】：

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

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

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

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

此解决方案与使用Stack 的解决方案的区别在于Stack 中的Positioned 小部件不占用垂直空间。但是，ColumnSuper 将具有其所有子小部件的大小。 注意我是这个包的作者。

【讨论】：

如果这确实有效，我更喜欢这个，因为位置在堆栈中不是一个好的解决方案。如果你的底部太不合适，它就不能再点击了。但我不知道如何使用 ColumnSuper。
@chitgoks 要使用 ColumnSuper，您必须将 assorted_layout_widgets 包添加到您的 pubspec.yaml 配置文件中。见这里：pub.dev/packages/assorted_layout_widgets#-installing-tab-
是的，我做到了。一定是用错了。我会再检查一遍。