这个左边的icon+文字，肯定要用AppBar的leading写了，再设置个宽度，于是写了下面的代码：
01 | class HomePage extends StatelessWidget { |
02 | const HomePage({Key key}) : super(key: key); |
03 |
04 | @override |
05 | Widget build(BuildContext context) { |
06 | return Scaffold( |
07 | appBar: AppBar( |
08 | leading: Container( |
09 | margin: EdgeInsets.only(left: ScreenUtil().setWidth(30)), |
10 | width: ScreenUtil().setWidth(160), |
11 | child:Row( |
12 | children: <Widget>[ |
13 | Image.asset( |
14 | 'images/icon-addr.png', |
15 | width: ScreenUtil().setWidth(28), |
16 | height: ScreenUtil().setHeight(28), |
17 | ), |
18 | Text( |
19 | '合肥市', |
20 | style: TextStyle(fontSize: ScreenUtil().setSp(28)), |
21 | maxLines: 1, |
22 | overflow: TextOverflow.ellipsis, |
23 | ) |
24 | ], |
25 | ) |
26 | ), |
27 | title: Text( |
28 | '云仓网', |
29 | style: TextStyle( |
30 | fontSize: ScreenUtil().setSp(34), |
31 | ), |
32 | ), |
33 | centerTitle: true, |
34 | ), |
35 | body: Center( |
36 | child: Text('首页'), |
37 | ), |
38 | ); |
39 | } |
40 | } |
leading里面的Container宽度根本不起作用。
百度了好久没找到解决办法，倒是遇到很多和我一样问题的人，只能去google找找了：
结果我找到了下面的效果：
这个左边两个图标，这肯定超出了leading的范围了，查看了代码：
01 | return Scaffold( |
02 | key: _scaffoldKey, |
03 | appBar: AppBar( |
04 | titleSpacing: 0.0, |
05 | title: Row( |
06 | mainAxisAlignment: MainAxisAlignment.start, |
07 | crossAxisAlignment: CrossAxisAlignment.center, |
08 | children: <Widget>[ |
09 | IconButton( |
10 | icon: Icon(Icons.menu), |
11 | onPressed: () => _scaffoldKey.currentState.openDrawer(), |
12 | ), |
13 | Stack( |
14 | alignment: Alignment.center, |
15 | children: <Widget>[ |
16 | IconButton( |
17 | icon: Icon(Icons.mail_outline), |
18 | onPressed: _onClickNotification, |
19 | ), |
20 | Positioned( |
21 | top: 12.0, |
22 | right: 10.0, |
23 | width: 10.0, |
24 | height: 10.0, |
25 | child: Container( |
26 | decoration: BoxDecoration( |
27 | shape: BoxShape.circle, |
28 | color: AppColors.notification, |
29 | ), |
30 | ), |
31 | ) |
32 | ], |
33 | ), |
34 | Expanded( |
35 | child: Center(child: Text('test')), |
36 | ) |
37 | ], |
38 | ), |
39 | automaticallyImplyLeading: false, |
40 | centerTitle: true, |
41 | actions: <Widget>[ |
42 | Row( |
43 | children: <Widget>[ |
44 | Text('Online'), |
45 | Switch( |
46 | value: true, |
47 | onChanged: (bool value) {}, |
48 | ) |
49 | ], |
50 | ) |
51 | ], |
52 | ), |
53 | drawer: Drawer( |
54 | child: _buildDrawer(), |
55 | ), |
56 | body: Container( |
57 | color: Colors.orange, |
58 | ), |
59 | ); |
最终代码：
01 | class HomePage extends StatelessWidget { |
02 | const HomePage({Key key}) : super(key: key); |
03 |
04 | @override |
05 | Widget build(BuildContext context) { |
06 | return Scaffold( |
07 | appBar: AppBar( |
08 | title: Row( |
09 | mainAxisAlignment: MainAxisAlignment.start, |
10 | crossAxisAlignment: CrossAxisAlignment.center, |
11 | children: <Widget>[ |
12 | Row( |
13 | children: <Widget>[ |
14 | Image.asset( |
15 | 'images/icon-addr.png', |
16 | width: ScreenUtil().setWidth(28), |
17 | height: ScreenUtil().setHeight(28), |
18 | ), |
19 | Text( |
20 | '合肥市', |
21 | style: TextStyle(fontSize: ScreenUtil().setSp(28)), |
22 | maxLines: 1, |
23 | overflow: TextOverflow.ellipsis, |
24 | ) |
25 | ], |
26 | ), |
27 | Expanded( |
28 | child: Center( |
29 | child: Text('云仓网',style: TextStyle(fontSize: ScreenUtil().setSp(34),),) |
30 | ), |
31 | ) |
32 | ], |
33 | ), |
34 | centerTitle: true, |
35 | ), |
36 | body: Center( |
37 | child: Text('首页'), |
38 | ), |
39 | ); |
40 | } |
41 | } |