一个Flexible的小例子

效果实现图：

需求描述：一个横向布局，最左边是一个定长组件，中间是一个变长组件，右边是一个定长组件。变长组件可以自适应宽度，同时内容过长时不会导致溢出。

实现1：Row->Row(Child1,Child2), Child3，如果Child2过长必定会导致整体溢出。

实现2：Row->Expanded(child:Row(child1,child2)),child3，这样解决了溢出的问题，但是左半部分的宽度被定死，child2内容少的时候就很丑。

实现3：Row->Flexible(child:Row(child1,child2)),child3，可以自适应宽度，但是child2过长还是会导致溢出。

实现4：Row->Flexible(child:Row(child1,Flexible(child2)),child3，可以自适应宽度，如果child2过长不会导致溢出。需要注意的是第二个Row布局需要配置mainAxisSize: MainAxisSize.min，否则无法做到自适应宽度。

最终的代码实现：

Row(
      children: <Widget>[
        Flexible(
          child: Container(
            decoration: BoxDecoration(
              color: Color(0x10000000),
              borderRadius: BorderRadius.circular(8),
            ),
            padding: EdgeInsets.symmetric(
              horizontal: 24,
              vertical: 8,
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                    width: 30,
                    height: 30,
                    color: Colors.blue,
                    child: Center(
                      child: Text(
                        "占位",
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    )),
                SizedBox(width: 10),
                Flexible(
                  child: Text(
                    _displayText ?? "",
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
        SizedBox(width: 18),
        Container(
          width: 30,
          height: 30,
          color: Colors.red,
          child: Center(
            child: Text(
              "占位",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ],
    )