如何使一个小部件浮动在其他小部件之上而不影响底层布局？

Question

我想让一个小部件漂浮在另一个小部件的顶部而不影响底层布局。我的意思是，让我们看看

TextField

小部件 装饰的边框属性设置为

OutlinedInputBorder

。

Column(
  children: <Widget>[
    Container(
      width: double.infinity,
      height: 56,
      color: Colors.amber,
    ),
    TextField(
      decoration: InputDecoration(
        filled: true,
        labelText: 'Email',
        border: OutlineInputBorder(
          borderSide: BorderSide.none,
        ),
      ),
    ),
  ],
);

如您所见，浮动标签文本浮动在底层小部件的顶部，而不会影响底层小部件的布局方式，同时标签粘在文本字段小部件上。 AFAIK，这无法通过

Stack

小部件来完成。

IconButton

连锁反应也是如此。波纹效果扩展得比

IconButton

小部件的实际大小更大，而不影响按钮在小部件树中的布局方式。如何制作这种类型的小部件结构？

Answer 1

你可以尝试一下，你想要这样吗

Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 40),
            child: TextField(
              decoration: InputDecoration(
                filled: true,
                labelText: 'Email',
                labelStyle: TextStyle(color: Colors.black),
                border: OutlineInputBorder(
                  borderSide: BorderSide.none,
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: double.infinity,
              height: 56,
              color: Colors.orange.withOpacity(0.6),
            ),
          ),
        ],
      )

输出：

Answer 2

尝试 Overlay 小部件，它就是为此目的而设计的