flutter Expanded和Flexible区别一目了然

需求效果图

UI需求货币符号要字号要偏小，货币符号和数字间隔1dp，居中显示，效果图如下

实现代码

这里主要说下货币符号和金额展示这块，本来想用富文本Text.rich的，发现Text.rich如果增加间距需要用WidgetSpan，用了widgetSpan后，发现可以抛弃Text.rich了，直接row把。

代码实现

Widget _getMoneyWidget(String value) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: EdgeInsets.fromLTRB(0, 2, 0, 0),
          child: Text(value.substring(0,1),
              style: getTextStyle(Color(0xFF262C32),11)),
        ),
        Container(
          width: 1,
        ),
        Expanded(child:
        Container(
          color: Colors.blue,
          child: Text(value.substring(1),
            style:getTextStyle(Color(0xFF262C32),16),
            overflow:TextOverflow.ellipsis,maxLines: 1,),
        ))
      ],
    );
  }

代码实现1对应效果图
为了解决钱数overflow的问题这里增加了Expanded。但问题出现了，UI效果图货币信息要居中显示的，Expanded占据剩余控件，没法居中了，设置了mainAxisAlignment也不行，设置Text居中。固定宽度等都不行的。

解决方案

查源码看到了Flexible和Expanded的关系，Expanded是Flexible的子类。注意到Flexible有个属性fit。 Expanded传值FlexFit.tight,Flexible默认值FlexFit.loose

1、Expanded

2、Flexible

3、FlexFit.tight和FlexFit.loose区别
FlexFit定义了child如何填充剩余空间。
tight:child会填充剩余空间。也就是会把剩下的空间都撑开 loose:child不强制填充剩余空间。

代码实现中的Expanded改为Flexible效果