Flutter 拆分小部件用class类还是方法

Flutter布局个页面，嵌套非常严重，如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            widget.title,
          ),
          Center(
            child: Text(result,)
          ),
          Row(
            children: [
              MaterialButton(
                color: Theme.of(context).primaryColor,
                child: Text("1", style: TextStyle(color: Colors.white)),
                onPressed: () => onPressCallback('startActivity'),
              ),
              ......
            ]
          )
        ],
      ),
    ),
  );
}

将MaterialButton抽离出来，就会简便很多，如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            widget.title,
          ),
          Center(
            child: Text(result,)
          ),
          this._buildRowBtnWidget() // 拆分为组件方法
        ],
      ),
    ),
  );
}
 
/**
 * 组件方法模块
 */
Widget _buildRowBtnWidget() {
  return Row(
    children: [
      MaterialButton(
        color: Theme.of(context).primaryColor,
        child: Text("1", style: TextStyle(color: Colors.white)),
        onPressed: () => onPressCallback('startActivity'),
      ),
      ......
    ]
  )
}

或者

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            widget.title,
          ),
          Center(
            child: Text(result,)
          ),
          RowBtnWidget() // 拆分为组件方法
        ],
      ),
    ),
  );
}

class RowBtnWidget extends StatelessWidget {

    const RowBtnWidget();  //这里的const最好用上，不会导致重复渲染

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                widget.title,
              ),
              Center(
                child: Text(result,)
              ),
              RowBtnWidget() // 拆分为组件方法
            ],
          ),
        ),
    );
  }
}

上面第一种，是将小部件拆分成了方法，第二种，直接将小部件拆分成了类，两种都可行。

1、如果小部件会重复使用，或者在其他页面也会用到，建议单独抽离成类。如果仅仅在本页面使用一次，可以拆分成私有方法。
2、拆分成类，这里值继承静态类StatelessWidget，并且使用const，会比方法开销要小。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！