如何消除列中小部件之间的间隙？

Question

我有一个

Column

和两个

Container

。没有填充，没有边距。 尺寸完美契合。 但尽管如此，我还是在小部件之间发现了亚像素间隙。它在模拟器和真实设备上都可见。

我的代码如下：

       Column(
          children: [
            SizedBox(
              height: 57.0.h(context),
              width: MediaQuery.of(context).size.width,
              child: LayoutBuilder(
                builder: (context, constraints) => Column( // the column I actually am worried about
                  children: [
                    Container(
                      margin: EdgeInsets.zero,
                      padding: EdgeInsets.zero,
                      height: constraints.maxHeight * .45,
                      color: Theme.of(context).primaryColor,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          // here's some code
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.zero,
                      padding: EdgeInsets.zero,
                      height: constraints.maxHeight * .55,
                      color: Theme.of(context).primaryColor,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          // here's some code
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: PageView.builder(
                // here's some code
              ),
            ),
          ],
        ),

我尝试将容器制作在

Expanded

下方（以便占据所有剩余空间），但没有任何改变。

Answer 1

尝试添加

Container

的

decoration

，边框宽度为零。

Container(
  height: constraints.maxHeight * .45,
  decoration: BoxDecoration(
    color: Theme.of(context).primaryColor,
    border: Border.all(
      // one or both
      color: Colors.transparent,
      width: 0.0,
    ),
  ),
.....

Answer 2

我也有同样的问题。将每个小部件包装在具有所需颜色的 0 像素边框的容器中即可达到目的：

    Container(
        decoration: BoxDecoration(
          border: Border.all(
            width: 0.0,
            color: /* same Color that your widget has */,
          ),
          color: /* same Color that your widget has */,
        ),
        child: // child widget goes here
    )

该问题可能是由于抗锯齿行为引起的，如此 GitHub 问题中所述。

我认为这解决了问题，因为边框的颜色用于与硬件像素不对齐的抗锯齿边缘。但这只是我的理论。