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

Posted 2023-02-23

【中文标题】如何在 Flutter 中删除两个容器之间的空间？

【英文标题】：How to remove space between two containers in Flutter?

【发布时间】：2019-12-08 12:24:46

【问题描述】：

我在 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

【问题讨论】：

运行你的代码，我在 250/350/450 看不到任何空格。尝试为容器添加黑色边框。 decoration: new BoxDecoration( border: new Border.all(color: Colors.black))

【参考方案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),
        ),
      ),
    ],
  ),
);

【参考方案2】：

正如@sukhi 所说， 您需要在您的Container 中使用BoxDecoration。

但是您可以简单地将边框的宽度设置为 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)".

【参考方案3】：

有点晚了，但目前似乎是一个开放的 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的建议

【讨论】：

这里有什么问题？如果我在一列中有两个容器，我怎么知道有问题的容器？把它们都包起来？