Flutter Stack 不会让孩子重叠答案

【问题标题】：Flutter Stack doesn't make children overlapFlutter Stack 不会让孩子重叠
【发布时间】：2020-03-02 10:36:14
【问题描述】：

我正在尝试将一条水平线（当前为Divider，但可以更改为CustomPaint）作为Row 的背景。但是，无论孩子的顺序如何，该行始终位于Row 的前面。我不知道出了什么问题。这是代码。

Stack(
  children: <Widget>[
    Positioned.fill(
      child: const Divider(color: Colors.black),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Ink(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.arrow_forward, size: 32)
          ),
        ),
        Ink(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.location_on, size: 32)
          ),
        ),
        Ink(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.flag, size: 32)
          ),
        ),
      ],
    ),
  ],
),

这是结果图像。

【问题讨论】：

移除 Positioned.fill
@Z.Cajurao 不工作，并且破坏了布局（行未居中）

标签： flutter flutter-layout

【解决方案1】：

使用Container 而不是Ink

Stack(
  children: <Widget>[
    Positioned.fill(
      child: const Divider(color: Colors.black),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.arrow_forward, size: 32)
          ),
        ),
        Container(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.location_on, size: 32)
          ),
        ),
        Container(
          decoration: ShapeDecoration(
            color: Colors.grey[350],
            shape: CircleBorder(),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(Icons.flag, size: 32)
          ),
        ),
      ],
    ),
  ],
);

【讨论】：

谢谢！顺便问一下原因吗？
根据本文档api.flutter.dev/flutter/material/Ink-class.html，Ink 是为底层材质提供飞溅和高光。另一方面，Container 绘制自己，而不是推迟到最近的 Material 小部件。
Ink 小部件直接在 Material 上绘制给定的装饰，与 InkWell 和 InkResponse 绘制的方式相同那里。因此，当一个动作完成时，InkWell 在子元素上方绘制，Ink 小部件在小部件上绘制......即使它在堆栈中