我正在尝试将标题文本居中在具有前导和尾随操作的应用栏中。
@override Widget build(BuildContext context) { final menuButton = new PopupMenuButton<int>( onSelected: (int i) {}, itemBuilder: (BuildContext ctx) {}, child: new Icon( Icons.dashboard, ), ); return new Scaffold( appBar: new AppBar( // Here we take the value from the MyHomePage object that // was created by the App.build method, and use it to set // our appbar title. title: new Text(widget.title, textAlign: TextAlign.center), leading: new IconButton( icon: new Icon(Icons.accessibility), onPressed: () {}, ), actions: [ menuButton, ], ), body: new Center( child: new Text( 'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.', ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }
这很好用,除了标题在左侧对齐,如下图所示:
当我尝试将标题包含在中心时,它似乎太靠左了:
@override Widget build(BuildContext context) { final menuButton = new PopupMenuButton<int>( onSelected: (int i) {}, itemBuilder: (BuildContext ctx) {}, child: new Icon( Icons.dashboard, ), ); return new Scaffold( appBar: new AppBar( // Here we take the value from the MyHomePage object that // was created by the App.build method, and use it to set // our appbar title. title: new Center(child: new Text(widget.title, textAlign: TextAlign.center)), leading: new IconButton( icon: new Icon(Icons.accessibility), onPressed: () {}, ), actions: [ menuButton, ], ), body: new Center( child: new Text( 'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.', ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }
我想要一个解决方案,让标题文本在 2 个图标之间完美居中。
将标题居中是 iOS 上的默认设置。在 Android 上,的标题默认为左对齐,但您可以通过将其作为参数传递给构造函数来AppBar覆盖它。centerTitle: trueAppBar
AppBar
centerTitle: true
例子:
AppBar( centerTitle: true, // this is all you need ... )