如果 totalWidth 不能被 crossAxisCount 整除，GridView 不会覆盖背景

Question

我用 crossAxisCount: 3 创建了一个 GridView。问题是，如果 GridView 的 totalWidth 不能被 3 整除，背景将透过 GridView 发光，导致 GridView 上可见背景彩色线条。有办法避免吗？

注意：手机上不会出现问题

复制代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox(
          width: 301,
          child: GridView.count(
            crossAxisCount: 3,
            children: [
              for (int i = 0; i < 12; i++)
                Container(
                  color: Colors.black,
                ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

这可以使用 border 删除。

Container(
  decoration: BoxDecoration(
    color: Colors.black,
    border: Border.all(
      color: Colors.black,
    ),
  ),
),

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var responsive = MediaQuery.of(context).size; // add this line
    return Scaffold(
      body: SizedBox(
        width: responsive.width, // add this line
        height: responsive.height, // add this line
        child: GridView.count(
          crossAxisCount: 3,
          children: [
            for (int i = 0; i < 12; i++)
              Container( // change content to view borders og grid
                decoration: BoxDecoration( // add this line
                  border: Border.all( // add this line
                    color: Colors.white, // add this line
                    width: 1, // add this line
                  ), // add this line
                  color: Colors.black, // add this line
                ), // add this line
              ),
          ],
        ),
      ),
    );
  }
}

结果将是这样的：

Answer 3

或者你可以只设置值边框 width = 0.0

SizedBox(
        width: 301,
        child: GridView.count(
          crossAxisCount: 3,
          children: [
            for (int i = 0; i < 12; i++)
              Container(
                decoration: BoxDecoration(
                  color: Colors.black,
                  border: Border.all(
                    width: 0.0,
                  ),
                ),
              ),
          ],
        ),
      ),

如果 totalWidth 不能被 crossAxisCount 整除，GridView 不会覆盖背景

GridView does not cover background if totalWidth is not dividable by crossAxisCount

gridview

dart

flutter