Flutter:小部件的重叠边缘与第二个小部件 [英] Flutter: Overlap Edge of Widget with second Widget

问题描述

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

I want to overlap the bottom edge of a widget with another widget so that it looks like this:

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

I am using a stack to position the arrow button over the card. At the moment I just set the position with an invisible box above it. The issue is that this method only works for that exact resolution - it should be screen size independent.

窗口小部件的必需代码:

The necessary code for the widget:

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

推荐答案

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

You can use the Stack and Positioned widget to achieve this UI.

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

输出:

这篇关于Flutter:小部件的重叠边缘与第二个小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！