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

【问题标题】：Unexpected vertical lines between container elements of a row行的容器元素之间出现意外的垂直线
【发布时间】：2018-07-05 00:27:58
【问题描述】：

我正在使用 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 处颤动 • 框架修订 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 在 / • Java 版 OpenJDK 运行时环境（内部版本 1.8.0_152-release-915-b01）

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

【问题讨论】：

这是一个很好的发现。您应该对此提出问题。不错
真的需要color: new Color.fromARGB(255, 0, 0, 0),作为背景吗？要解决此问题，您可以更改为颜色 Color.fromARGB(255, 100, 100, 100);
其实是个bug，因为在Expandedfill它会缩放屏幕来填充，只取决于Expanded的数量，特别是如果是奇数，屏幕大小除Expanded 的数量并不完美
报告了一个错误：github.com/flutter/flutter/issues/14288
我认为它来自const Color color = const Color.fromARGB(255, 100, 100, 100);，让我们通过更改为红色来检查它，也许是Color color = Colors.red;

标签： flutter

【解决方案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;
}

【讨论】：