如何在Flutter中删除两个容器之间的空间? [英] How to remove space between two containers in Flutter?

问题描述

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

I have two Containers of height 250 inside Column widget. There is no any other widget present between this two Container widget but still I can see very little space between two containers.

这是我的代码...

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

I don't know why but if I set the height of this containers to 100 or 400 it is not showing any space between container. Did not try with many different values for height but space is visible for some value and not visible for other value.

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

Here's the screenshot from my phone...

两个容器的高度均等于250

两个容器的高度均等于400

推荐答案

为此替换支架:

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中删除两个容器之间的空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！