允许一个小部件溢出到另一个小部件 [英] Allowing a widget to overflow to another widget

问题描述

我试图实现一种允许小部件溢出到另一个小部件的效果
，如这里

I was trying to achieve an effect of allowing a widget to overflow to another widget
as seen here

到目前为止，我的代码是这样的:

The code I've this far is this:

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return new Column(children: <Widget>[
      new Container(
      color: Colors.blue,
      height: screenSize.height / 2,
      width: screenSize.width,
      child: new Center(
        child: new Container(
          margin: const EdgeInsets.only(top: 320.0),
          color: Colors.red,
          height: 40.0,
          width: 40.0,
        ),
      ))
]);
}

这导致随后，正方形被容器切掉.
还有其他方法吗?

This resulted in the following, the square is cut off by the container.
Is there another approach to this?

推荐答案

一般来说，您应该永不溢出.

Generally speaking you should never overflow in flutter.

如果要使用特定的布局，则需要在不同的层上显式地分隔溢出"窗口小部件.

If you want a specific layout, you'll need to explicitly separate the "overflowing" widget on a different layer.

一种解决方案是 Stack 小部件，它允许小部件相互之间.

One solution for that is Stack widget, which allow widgets to be above each others.

最终实现这一目标:

扑扑代码应该是

new Stack(
  fit: StackFit.expand,
  children: <Widget>[
    new Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new Expanded(
          child: new Container(
            color: Colors.blue,
          ),
        ),
        new Expanded(
          child: new Container(
            color: Colors.white,
          ),
        ),
      ],
    ),
    new Center(
      child: new Container(
        color: Colors.red,
        height: 40.0,
        width: 40.0,
      ),
    )
  ],
);

这篇关于允许一个小部件溢出到另一个小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！