@override
Widget build(BuildContext context) {return Column(children: <Widget>[Container(height: 45,child: Row(children: <Widget>[SizedBox(width: 30,),Icon(Icons.notifications,color: Colors.blue,),SizedBox(width: 30,),Expanded(child: Text('消息中心'),),Container(padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(50)),color: Colors.red),child: Text('2',style: TextStyle(color: Colors.white),),),SizedBox(width: 15,),],),),Divider(),//类似上面的布局写6个],);
}

或许说可以将每一个 Item封装为一个方法，写法如下：

_buildItem(IconData iconData, Color iconColor, String title, Widget widget) {return Container(height: 45,child: Row(children: <Widget>[SizedBox(width: 30,),Icon(iconData,color: iconColor,),SizedBox(width: 30,),Expanded(child: Text('$title'),),widget,SizedBox(width: 15,),],),);
}@override
Widget build(BuildContext context) {return Column(children: <Widget>[_buildItem(...),Divider(),_buildItem(...),Divider(),_buildItem(...),Divider(),_buildItem(...),Divider(),_buildItem(...),Divider(),_buildItem(...),Divider(),],);
}

这样看起来好多了，基本解决了嵌套地狱问题，但这样写还存在一个非常大的问题-性能问题，一旦其中一个数字发生变化，整个页面都要重建，Flutter 开发中非常重要的一个原则就是 尽可能少的重建组件，因此将上面封装到方法中组件变为一个 Widget。

class SettingDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: <Widget>[_SettingItem(iconData: Icons.notifications,iconColor: Colors.blue,title: '消息中心',suffix: _NotificationsText(text: '2',),),Divider(),_SettingItem(iconData: Icons.thumb_up,iconColor: Colors.green,title: '我赞过的',suffix: _Suffix(text: '121篇',),),Divider(),_SettingItem(iconData: Icons.grade,iconColor: Colors.yellow,title: '收藏集',suffix: _Suffix(text: '2个',),),Divider(),_SettingItem(iconData: Icons.shopping_basket,iconColor: Colors.yellow,title: '已购小册',suffix: _Suffix(text: '100个',),),Divider(),_SettingItem(iconData: Icons.account_balance_wallet,iconColor: Colors.blue,title: '我的钱包',suffix: _Suffix(text: '10万',),),Divider(),_SettingItem(iconData: Icons.location_on,iconColor: Colors.grey,title: '阅读过的文章',suffix: _Suffix(text: '1034篇',),),Divider(),_SettingItem(iconData: Icons.local_offer,iconColor: Colors.grey,title: '标签管理',suffix: _Suffix(text: '27个',),),],);}
}class _SettingItem extends StatelessWidget {const _SettingItem({Key key, this.iconData, this.iconColor, this.title, this.suffix}): super(key: key);final IconData iconData;final Color iconColor;final String title;final Widget suffix;@overrideWidget build(BuildContext context) {return Container(height: 45,child: Row(children: <Widget>[SizedBox(width: 30,),Icon(iconData,color: iconColor,),SizedBox(width: 30,),Expanded(child: Text('$title'),),suffix,SizedBox(width: 15,),],),);}
}class _NotificationsText extends StatelessWidget {final String text;const _NotificationsText({Key key, this.text}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(50)),color: Colors.red),child: Text('$text',style: TextStyle(color: Colors.white),),);}
}class _Suffix extends StatelessWidget {final String text;const _Suffix({Key key, this.text}) : super(key: key);@overrideWidget build(BuildContext context) {return Text('$text',style: TextStyle(color: Colors.grey.withOpacity(.5)),);}
}

封装为一个个单独的小组件，将有变化的组件尽量单独封装，这样就不会重建整个控件树，增强了可读性和可维护性，而且对性能有很大的提升。