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