Question

我正在使用Flutter框架开发app。我最近发现了奇怪的问题。我缩小了它并创建了重现问题的样本

请参阅以下代码：


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 doctor的结果：

[✓] Flutter（在Linux上，locale en_US.UTF-8，频道alpha） •颤动/颤动 •框架修订版8f65fec5f5（6周前），2017-12-12 09:50:14 -0800 •引擎修订版edaecdc8b8 •Tools Dart版本1.25.0-dev.11.0 •Engine 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）（模拟器）

Answer 1

问题正在发生，因为容器子元素与物理像素不对齐。这当然是可能的，但在类似的情况下android LinearLayout调整一些子宽度，所以总容器填充。很难判断哪种方法是正确的，但是至少可以选择测量像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;
}

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

1 个答案: