一行的容器元素之间出现意外的垂直线

Question

我正在使用 Flutter 框架开发应用程序。我最近注意到一个奇怪的问题。我缩小了范围并创建了重现问题的示例

请参阅下面的代码：

import 'package:flutter/material.dart';

const Color color = const Color.fromARGB(255, 100, 100, 100);

void main() =>
    runApp(
      new Container(
        color: new Color.fromARGB(255, 0, 0, 0),
        child: new Row(
          textDirection: TextDirection.ltr,
          children: [
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
          ],
        ),
      ),
    );

产生以下结果：

如果我删除行子行之一，行就会消失。这是一个错误还是我做错了什么？

您可以在下面找到颤振医生的结果：

[?] Flutter（在 Linux 上，语言环境 en_US.UTF-8，通道 alpha） • Flutter at /flutter • 框架修订版 8f65fec5f5（6 周前），2017-12-12 09:50:14 -0800 • 引擎修订版 edaecdc8b8 •工具 Dart 版本 1.25.0-dev.11.0 • 引擎 Dart 版本 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e

[?] Android 工具链 - 为 Android 设备开发 (Android SDK 27.0.3) • Android SDK 位于 • Android NDK 位置未配置（可选；对本机分析支持有用） • 平台 android-27，构建工具 27.0.3 • ANDROID_HOME = • Java 二进制文件位于：/jre/bin/java • Java 版本 OpenJDK 运行时环境（构建 1.8.0_152-release-915-b01）

[?] Android Studio（3.0 版） • Android Studio at / • Java 版 OpenJDK 运行时环境（构建 1.8.0_152-release-915-b01）

[?] 连接的设备 • 为 x86 构建的 Android SDK • emulator-5554 • android-x86 • Android 8.1.0 (API 27)（模拟器）

Answer 1

发生此问题的原因是容器子级未与物理像素对齐。这当然是可能的，但在类似的情况下，android LinearLayout 会调整一些子元素的宽度，以便整个容器被填充。很难判断哪种方法是正确的，但如果 flutter 至少有像 Android 那样测量儿童的选项，那就太好了。

目前对我来说最好的解决方法是手动测量儿童，如下所示：

int CHILDREN_COUNT = 7;
List<Widget> children = new List(CHILDREN_COUNT);

MediaQueryData mediaQueryData = MediaQuery.of(context);
int physicalWidth = (mediaQueryData.size.width * mediaQueryData.devicePixelRatio).floor();

for (int i = 0, pixelsLeft = physicalWidth; i < CHILDREN_COUNT; i++) {
  int columnWidth = (pixelsLeft / (CHILDREN_COUNT - i)).floor();

  children[i] = new Container(
    width: columnWidth / mediaQueryData.devicePixelRatio,
    color: color,
  );

  pixelsLeft -= columnWidth;
}