Flutter系列之Container组件间的间隙问题

时间:2021-2-20 作者:admin

Flutter 中 Container 默认是没有间距的,当使用多个 Container 进行布局时,它们会紧贴在一起,如下图:

我们不想让它们紧贴在一起,而是想让它们相互之间有一定的距离,那么如何解决这个问题呢?

在 Flutter 中,解决多个 Container 之间的间距问题一般有三种方式。

设置margin

第一种方式是设置 Container 组件的 margin属性:

Container(
  margin: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
  color: Colors.orange,
  width: 150,
  height: 150,
),
Container(
    color: Colors.orange,
    width: 150,
    height: 150,
)

在上面代码中,设置了其中一个 Container 组件水平方向上的 margin 为 30,垂直方向上的 margin 为 20。效果如下:

使用 Padding 组件

第二种方式是使用 Padding 组件,将 Container 组件放在 Padding 组件内,然后设置 Padding 组件的 padding 属性:

Container(
    color: Colors.blue,
    width: 150,
    height: 150,
),
Padding(
  padding: EdgeInsets.only(top: 20),
  child: Container(
    color: Colors.orange,
    width: 150,
    height: 150,
  ),
),

在上面代码中,我们将第二个 Container 放在了Padding 组件中,并设置了 Padding 组件的内上边距为 20。效果如下:

使用 SizeBox 组件

第三种方式是设置 SizeBox 组件的 height 属性或 width 属性:

Container(
  color: Colors.blue,
  width: 150,
  height: 150,
  child: Text(
    'data',
    style: TextStyle(fontSize: 16),
  ),
),
// 设置 SizeBox 
SizedBox(height: 20),

Container(
    color: Colors.orange,
    width: 150,
    height: 150,
)

在上面代码中,在两个 Container 组件之间添加 SizeBox 组件,然后设置 SizeBox 的 height 属性,从而让两个 Container 之间具有垂直方向上间距。效果如下:

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。