首页 > 建站教程 > APP开发,混合APP >  Flutter 拆分小部件用class类还是方法正文

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,会比方法开销要小。