如何消除 Flutter 中两个容器之间的空间？

Question

我在 Column 小部件内有两个高度 250 的容器。这两个容器小部件之间没有任何其他小部件，但我仍然可以看到两个容器之间的空间很小。

这是我的代码...

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double height = 250;
    TextStyle containerTextStyle = TextStyle(color: Colors.white, fontSize: 24);

    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: height,
            color: Colors.black,
            child: Center(
              child: Text('Container 1', style: containerTextStyle),
            ),
          ),
          Container(
            height: height,
            color: Colors.black,
            child: Center(
              child: Text('Container 2', style: containerTextStyle),
            ),
          ),
        ],
      ),
    );
  }
}

我不知道为什么，但如果我将此容器的高度设置为 100 或 400，它不会显示容器之间的任何空间。没有尝试使用许多不同的高度值，但空间对于某些值可见，而对于其他值不可见。

这是我手机的屏幕截图...

两个容器的高度都等于 250

两个容器的高度都等于 400

Answer 1

正如 @sukhi 所说，您需要BoxDecoration在您的Container.

但您可以简单地将边框宽度设置为 0，而不是给出边框颜色。

像下面这样：

Container(
  decoration: BoxDecoration(
    color: Colors.black,
    border: Border.all(width: 0),
  ),
  height: height,
  child: Center(
    child: Text('Container 1', style: containerTextStyle),
  ),
),
Container(
  decoration: BoxDecoration(
    color: Colors.black,
    border: Border.all(width: 0),
  ),
  height: height,
  child: Center(
    child: Text('Container 2', style: containerTextStyle),
  ),
),

并且不要忘记在内部提供颜色BoxDecoration而不是Container其本身，否则会引发错误。

Container(
  decoration: BoxDecoration(
    color: Colors.black,
    border: Border.all(width: 0),
  ),
  height: height,
  child: Center(
    child: Text('Container 1', style: containerTextStyle),
  ),
),
Container(
  decoration: BoxDecoration(
    color: Colors.black,
    border: Border.all(width: 0),
  ),
  height: height,
  child: Center(
    child: Text('Container 2', style: containerTextStyle),
  ),
),