学会这种方法，Flutter UI开发提速一倍

今天主要讲的是一种思想，我称之为高拆解高独立的思想。

先来说说Flutter UI开发与客户端的异同点。

相同点：是两者都会采用封装的形式来竟可能的完成基本布局相似的控件，以便达到节省代码量及快速修改的效果。

不同点：是客户端多采用继承的形式来在原控件上增加新的控件或属性等；而Flutter多采用组合的方式来达到UI的快速构建。客户端UI多采用相对布局的方式来绘制UI,Flutter则采用内嵌的形式来绘制UI。

内嵌的形式使我们构建UI时更加注重Widget本身而不是相对于其他的Widget，相较于客户端，我们不需要知道其他View是否存在，布局如何等问题。因此利用该特性我们能加方便的构建一些复杂逻辑的界面。以淘宝的商品详情页为例。
商品1如下：

商品1

商品2如下：

商品2

商品1与商品2做比较，商品1多了优惠券、排名部分、保障、具体评价、具体问答、店铺推荐等部分。那么如何来绘制这些根据不同条件而绘制的UI呢。
以iOS端为例，两种方式，第一种以tableView的形式，第二种以scrollView的形式。以tableView的形式来开发，我们需要知道具体要返回几个row以及具体哪几个row，条件判断需要在获取到网络数据之后先进行处理，处理完成后才能为tableView设置数据源以及代理，而不同数据源下的row显示也会略有不同（比如商品1在row0含有优惠券而商品2没有）。以scrollView的实行来开发，我们需要将详情页分割成独立的View，处理完网络数据后对相应要显示的View进行约束，但是我们不能判断相对约束的两个View是否显示。
以Flutter来开发该界面，内嵌方式促使我们对控件进行更加细致的拆解以及封装，我们可以将所有可能出现的UI都拆分成许多零碎的部分。然后我们只要考虑针对独立的零碎的部分在哪种情况中会展示，哪种情况不展示即可（不展示返回空Container）。内嵌的多孩子组件（Row、Column、Wrap等）会按我们需要的顺序将我们的零碎部分拼接下去而我们不必去关注相邻的Widget具体是哪一部分。对于该详情页，我们甚至可以将每一行对封装成一个Widget。
上示例代码：

  列表代码 
  Widget listViewLayoutSeparated() {
    return ListView(
      padding: EdgeInsets.only(top: 0),
      children: <Widget>[
        GoodsPicturesWidget(model: goodsModel),//图片
        GoodsDiscountCouponWidget(model: goodsModel),//优惠券
        GoodsNameWidget(model: goodsModel),//商品名
        GoodsRecommendWidget(model: goodsModel),//推荐
        GoodsRankingWidget(model: goodsModel),//排名
        //……等等
      ],
    );
  }
优惠券代码
class GoodsDiscountCouponWidget extends StatefulWidget {
  final GoodsModel model;
  LYTDriverWayBillInfoCell({
    Key key,
    this.model,
  }) : super(key: key);
  @override
  _GoodsDiscountCouponWidgetState createState() =>
      _GoodsDiscountCouponWidgetState();
}

class _GoodsDiscountCouponWidgetState extends State<GoodsDiscountCouponWidget> {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 375, height: 667)..init(context);
    if (widget.model == null) {
      return Container();
    }
    if (widget.model.haveDiscountCoupon == null) {
      return Container();
    }
    if (!widget.model.haveDiscountCoupon) {
      return Container();
    }
    return Container(
      padding: EdgeInsets.fromLTRB(15, 10, 15, 10),
      child: Container(
        decoration: BoxDecoration(
          borderRadius:
              BorderRadius.all(Radius.circular(ScreenUtil().setWidth(10))),
          color: Colors.red,
        ),
        child: Row(
          children: <Widget>[
            Text('1'),
            //..等等
          ],
        ),
      ),
    );
  }
}

高拆解高独立的思想使我们更加关注于Widget自身在不同条件下的显示，而不用在意其他Widget的情况，如此一来大大节约了处理布局的时间消费，同时使我们的Widget更加的容易测试，修改，排序等。