Flutter Widget嵌套深，修改代码麻烦？

背景

许多人初次接触Flutter时非常不习惯，比起使用VUE开发的界面、代码、样式分离，代码清晰明了，Flutter开发的界面、代码、样式都混在一起，尤其是界面往往需要许多组件组合在一起实现，这个时候如果界面够复杂，会出现可怕的嵌套地狱，非常不利于维护。

解决方法

解决Flutter Widget地狱的方法有很多种，根据我的开发经验，着重介绍以下几种方法。

1. 将组件转化为方法，这一种方式非常常用。
2. 将组件转化为 StatelessWidget 或者 StatefulWidget ，我们习惯只把重复用到的组件做封装，实际上这样写更好，这个我会在后面提到。
3. 第三种灵感来自于掘金的一篇文章《Flutter嵌套深？扩展函数了解一下》，有兴趣的朋友可以看一下。

相信很多人没注意到，dart 从2.6.0开始支持扩展函数了，也就是说我们可以给dart 类型扩展一些功能，让我们的代码更利于维护。

代码

下面是我写的两种扩展方法，主要用于参数频繁改动的页面，每个人习惯不同，你也可以把参数声明在类名开头，我更倾向于让参数和代码挨在一起，方便增删改。

修改 pubspec.yaml 以支持 Extension：

...

# sdk 版本至少2.6.0
environment:
  sdk: '>=2.6.0 <3.0.0'

...

Widget扩展代码：

import 'package:flutter/material.dart';
export 'widget_extention.dart';

typedef ListPropertyCallBack = Widget Function(List<dynamic> props);
typedef MapPropertyCallBack = Widget Function(Map<String, dynamic> props);

/// List to Widget
extension ListToWidgetChain on List {
  /// [toWidget]后接父组件
  Widget toWidget(ListPropertyCallBack propertyCallBack) {
    if (propertyCallBack != null) {
      return propertyCallBack(this);
    }
    return null;
  }
}

/// Map to Widget
extension MapToWidgetChain on Map {
  /// [toWidget]后接父组件
  Widget toWidget(MapPropertyCallBack propertyCallBack) {
    if (propertyCallBack != null) {
      return propertyCallBack(this);
    }
    return null;
  }
}

实际使用：

import 'package:myPackage/extention/widget_extention.dart';

/// List to Widget
Widget _renderItem(Map item) {
  return [
    // 名称
    item["name"],
    // 状态
    item["status"],
    // 时间
    item["time"]
  ].toWidget((props) => ListView.builder(
      itemCount: props.length,
      itemBuilder: (context, index) => ListTile(
          leading: Icon(Icons.ac_unit),
          title: Text(props[0]),
          dense: true)));
}

/// Map to Widget
Widget _renderItem2() {
  return {
    // 名称
    "name": "王晓阳",
    // 状态
    "status": "迟到",
    // 时间
    "time": "2020-06-22 9:56",
  }.toWidget((props) => ListTile(
      title: Text(props["name"]),
      subtitle: Text(props["status"]),
      trailing: Text(props["time"]),
      dense: true));
}