基于颤动中文本长度的文本宽度

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,
)

正确知道我正在根据文本长度使用宽度来设置宽度，但是由于推特和instagram之间的间距大于应有的宽度，这给了我不足的结果。

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

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

Answer 1

您可以将mainAxisAlignment: MainAxisAlignment.spaceEvenly用于

之类的Row元素

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，您可以查看此文章。我发现它真的很有帮助。