flutter - 如何在 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，则容器之间不会显示任何空间。没有尝试使用许多不同的高度值，但空间对于某些值是可见的，而对于其他值是不可见的。

这是我手机的截图...

两个 Containers 的高度都等于 250


两个 Containers 的高度都等于 400

Answer 1

用这个替换你的脚手架:

return Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: height,
        decoration: BoxDecoration(
          border: Border.all(width: 0, color: Colors.black),
          color: Colors.black,
        ),
        child: Center(
          child: Text('Container 1', style: containerTextStyle),
        ),
      ),
      Container(
        height: height,
        decoration: BoxDecoration(
          border: Border.all(width: 0, color: Colors.black),
          color: Colors.black,
        ),
        child: Center(
          child: Text('Container 2', style: containerTextStyle),
        ),
      ),
    ],
  ),
);