flutter - 带有黑色容器的 ListView 在它们之间显示一条 1 px 的白线

Question

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Listview Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: ListWidget(),
      ),
    );
  }
}

class ListWidget extends StatelessWidget {
  const ListWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    return ListView(
      children: <Widget>[
        Container(
          width: width,
          height: height,
          color: Colors.black,
        ),
        Container(
          width: width,
          height: height,
          color: Colors.black,
        ),
        Container(
          width: width,
          height: height,
          color: Colors.black,
        ),
        Container(
          width: width,
          height: height,
          color: Colors.black,
        ),
      ],
    );
  }
}

当我在模拟器中运行上述代码时，有时两个容器之间会出现一条细白线，如下所示。

这种情况几乎总是发生，并且在我为 Web 构建应用程序并在 chrome 上运行时更加明显。即使是生产版本也有这些生产线。

我无法弄清楚发生了什么，我什至尝试将 ListView 替换为 SingleChildScrollView，并将子元素作为列。但它仍然是一样的。

标签： flutterflutter-layoutflutter-web