Flutter 中 Column 的子节点之间的空间小于 MainAxisSize.min

Posted 2023-02-23

【中文标题】Flutter 中 Column 的子节点之间的空间小于 MainAxisSize.min

【英文标题】：Less space than MainAxisSize.min between Column's children in Flutter

【发布时间】：2020-07-04 02:30:02

【问题描述】：

我已经阅读了一些关于在列中增加子级间距的讨论，但是我想让它们彼此更接近。 我想要这样的 2 个文本：

我现在的代码，这使得“天”文本与数字相差太远：

Widget numberOfDays = Container(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
     Text(
        '$_counter', // 25
        style: Theme.of(context).textTheme.display4,
      ),
     Text(
        'Days',
        style: Theme.of(context).textTheme.caption,
      ),
    ],
  ),
);

也许用列是不可能的？我应该使用堆栈并相应地定位它们吗？ 谢谢。

【参考方案1】：

你在寻找这样的东西吗？

Stack(
  children: <Widget>[
    Text(
      '25', // 25
      style: Theme.of(context).textTheme.display4,
    ),
    Positioned(
      right: 0,
      bottom: 10,
      child: Text(
        'Days',
        style: Theme.of(context).textTheme.caption,
      ),
    )
  ],
)

输出：

【讨论】：

'嘿，这很好！'谢谢你，它就像一个魅力:)

【参考方案2】：

默认情况下，一行或一列在其主轴上占据尽可能多的空间，但如果您想将子级紧密地打包在一起，请将其mainAxisSize 设置为MainAxisSize.min。以下示例使用此属性将星形图标打包在一起。

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.black),
    Icon(Icons.star, color: Colors.black),
  ],
)