Question

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

这是我的代码...

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

有点晚了，但目前似乎是一个开放的 Flutter 问题。我的解决方案与其他答案类似，但由于我的案例中的颜色不透明，我不得不用另一个容器包装有问题的容器，并将装饰添加到父容器：


decoration: BoxDecoration(
             color: Colors.black, //the color of the main container
             border: Border.all(
               //apply border to only that side where the line is appearing i.e. top | bottom | right | left.
               width: 2.0, //depends on the width of the unintended line
               color: Colors.black,
             ),
           ),

根据https://github.com/flutter/flutter/issues/14288#issuecomment-668795963

的建议

Answer 2

正如@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内输入颜色，否则会引发错误。

Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".

Answer 3

为此替换脚手架：

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),
        ),
      ),
    ],
  ),
);

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

3 个答案: