flutter GridView呈现的项之间有微小的间隙

thtygnil 于 2023-08-07 发布在 Flutter

关注(0)|答案(3)|浏览(171)

我需要在我的应用程序中相同的小部件网格。部件是正方形的，它们之间不能有间隙。我不能让它工作，因为总是有似乎随机的间隙之间的一些小部件。有时会有很多间隙，有时只是在其中几个之间，这取决于应用窗口的大小。
下面是我能想到的最小的例子，它显示了这个问题：

import 'package:flutter/material.dart';

void main() => runApp(const TestApp());

class TestApp extends StatelessWidget {
  const TestApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => const Test(),
      },
    );
  }
}

class Test extends StatelessWidget {
  const Test();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: GridView.count(
        crossAxisCount: 7,
        children: List.generate(49, (index) {
        return Container(
          width: double.infinity,
          height: double.infinity,
          decoration: const BoxDecoration(
            color: Colors.black,
          ));
        }),
      ),
    );
  }
}

字符串
如果我在www.example.com上的嵌入式DartPad中运行此操作flutter.dev，我会得到以下结果：

的数据
在代码和渲染窗口之间移动分隔符，我可能会得到这样的结果：

的
因为GridView默认为小部件之间的填充值为0.0，所以我本以为结果会是一个巨大的、完全黑色的正方形。（一些）小部件之间的灰色边界是从哪里来的，我该如何摆脱它们？

flutter

来源：https://stackoverflow.com/questions/76823972/gridview-renders-items-with-a-tiny-gap-between-them

3条答案

按热度按时间

avkwfej41#

为什么会这样？
“你正在绘制一系列彼此相邻的矩形，在不同的背景颜色之上，但它们与物理像素边界并不完全对齐。这意味着我们尝试对边缘进行反锯齿处理，每一个边缘都被绘制在背景之上，因此背景会在反锯齿中显示出来。”
解决办法是什么？
1.“第二种方法是用RepaintBoundary Package 所有这些小部件，这将导致它们都被绘制为一个图形，然后与父图形一起反锯齿。这可能无法解决问题，这取决于最终的对齐方式，但它应该更好。”
1.“总的来说，正确的答案是这里的第一个建议。不要把两个相邻的盒子都放在相同的背景上，只要把背景颜色放在共同的背景上就行了。”
来源：https://github.com/flutter/flutter/issues/15035#issuecomment-370028740
使用建议2.，您提供的可复制示例是固定的：
使用前：

的数据
之后：

的
变更（见备注）：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ColoredBox(
      /// provide a background color which is the same color as the GridView's
      /// cells background color.
      color: Colors.black,
      child: GridView.count(
        ...
      ),
    ),
  );
}

字符串

赞(0）回复(0）举报 2023-08-07

slhcrj9b2#

在这种情况下，当GridView的宽度不是列数的倍数时，就会发生这种情况。还有几个像素剩余，这些是你看到的间隙。
如果限制为列数的倍数，则间隙消失。例如，在

class Test extends StatelessWidget {
  const Test({super.key});

  final numColumns = 7;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: SizedBox(
        width: _width(context),
        child: GridView.count(
          crossAxisCount: numColumns,
          children: List.generate(numColumns * numColumns, (index) {
            return Container(
              width: double.infinity,
              height: double.infinity,
              decoration: const BoxDecoration(color: Colors.black),
            );
          }),
        ),
      ),
    );
  }

  double _width(BuildContext context) {
    final w = MediaQuery.sizeOf(context).width;

    return (w ~/ numColumns) * numColumns.toDouble();
  }

字符串

赞(0）回复(0）举报 2023-08-07

cedebl8k3#

这是已知的问题。请参阅：

作为我想出的解决方案，你可以将width的Border设置为BoxDecoration：

Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              color: Colors.black,
              border: Border.all(width: 0), // <-- Set this
            ),
          );

个字符

赞(0）回复(0）举报 2023-08-07

我来回答

flutter GridView呈现的项之间有微小的间隙

3条答案

相关问题

热门标签

最新问答