这个左边的icon+文字,肯定要用AppBar的leading写了,再设置个宽度,于是写了下面的代码:
class HomePage extends StatelessWidget { const HomePage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: Container( margin: EdgeInsets.only(left: ScreenUtil().setWidth(30)), width: ScreenUtil().setWidth(160), child:Row( children: <Widget>[ Image.asset( 'images/icon-addr.png', width: ScreenUtil().setWidth(28), height: ScreenUtil().setHeight(28), ), Text( '合肥市', style: TextStyle(fontSize: ScreenUtil().setSp(28)), maxLines: 1, overflow: TextOverflow.ellipsis, ) ], ) ), title: Text( '云仓网', style: TextStyle( fontSize: ScreenUtil().setSp(34), ), ), centerTitle: true, ), body: Center( child: Text('首页'), ), ); } }结果却是下面的效果:
leading里面的Container宽度根本不起作用。
百度了好久没找到解决办法,倒是遇到很多和我一样问题的人,只能去google找找了:
结果我找到了下面的效果:
这个左边两个图标,这肯定超出了leading的范围了,查看了代码:
return Scaffold( key: _scaffoldKey, appBar: AppBar( titleSpacing: 0.0, title: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ IconButton( icon: Icon(Icons.menu), onPressed: () => _scaffoldKey.currentState.openDrawer(), ), Stack( alignment: Alignment.center, children: <Widget>[ IconButton( icon: Icon(Icons.mail_outline), onPressed: _onClickNotification, ), Positioned( top: 12.0, right: 10.0, width: 10.0, height: 10.0, child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: AppColors.notification, ), ), ) ], ), Expanded( child: Center(child: Text('test')), ) ], ), automaticallyImplyLeading: false, centerTitle: true, actions: <Widget>[ Row( children: <Widget>[ Text('Online'), Switch( value: true, onChanged: (bool value) {}, ) ], ) ], ), drawer: Drawer( child: _buildDrawer(), ), body: Container( color: Colors.orange, ), );原来根本没有用leading来做,而是用了title,经过改造,终于实现了(标题不太居中,稍微调整即可):
最终代码:
class HomePage extends StatelessWidget { const HomePage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Row( children: <Widget>[ Image.asset( 'images/icon-addr.png', width: ScreenUtil().setWidth(28), height: ScreenUtil().setHeight(28), ), Text( '合肥市', style: TextStyle(fontSize: ScreenUtil().setSp(28)), maxLines: 1, overflow: TextOverflow.ellipsis, ) ], ), Expanded( child: Center( child: Text('云仓网',style: TextStyle(fontSize: ScreenUtil().setSp(34),),) ), ) ], ), centerTitle: true, ), body: Center( child: Text('首页'), ), ); } }