flutter - 文本宽度基于 flutter 中的文本长度

Question

我有这个 ListView.generator 返回这样的 Containers

Container(
  child: Row(
    children: <Widget>[
      Container(
        child: null,
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: social[i].color,
          shape: BoxShape.circle,
        ),
        margin: EdgeInsets.only(right: 7, top: 1,),
      ),
      Text(
        social[i].name, 
        style: TextStyle(
          color: Colors.white, 
          fontFamily: 'Muli', 
          fontSize: 24.0, 
          fontWeight: FontWeight.w700
        ),
      )
    ],
  ), 
  width: social[i].name.length * 16.0,
)

我知道我正在使用宽度来根据文本长度设置它，但它给我的结果并不充分，因为 Twitter 和 instagram 之间的间距比应有的要大。

我想要的结果是它们之间有均匀的空间。

将间距设置为 even 的 Wrap 小部件无济于事，因为我希望此列表具有用户分辨率的完整宽度并向左对齐。

Answer 1

您可以对 Row 元素使用 mainAxisAlignment: MainAxisAlignment.spaceEvenly

Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Container(
        child: null,
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: social[i].color,
          shape: BoxShape.circle,
        ),
        margin: EdgeInsets.only(right: 7, top: 1,),
      ),
      Text(
        social[i].name, 
        style: TextStyle(
          color: Colors.white, 
          fontFamily: 'Muli', 
          fontSize: 24.0, 
          fontWeight: FontWeight.w700
        ),
      )
    ],
  ), 
  width: social[i].name.length * 16.0,
)

如果您想了解更多信息。 https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041你可以查看这篇文章。我发现它真的很有帮助。