如何将应用栏标题居中 [英] How to center the title of an appbar
问题描述
我正在尝试将标题文本放在具有前后动作的应用栏中.
@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.
);
}
我希望找到一种解决方案,以使标题文本在两个图标之间完美居中.
将标题居中是iOS上的默认设置.在Android上,AppBar
的标题默认为左对齐,但是您可以通过传递 centerTitle: true
作为AppBar
构造函数的参数.
示例:
AppBar(
centerTitle: true, // this is all you need
...
)
I'm trying to center the title text in an app bar that has both a leading and trailing actions.
@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.
);
}
This works well except the title is aligned on the left as is shown in this picture:
As I try to include the title in the center, it appears that it's too much to the left:
@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.
);
}
I would love a solution to get the title text centered perfectly between the 2 icons.
Centering the title is the default on iOS. On Android, the AppBar
's title defaults to left-aligned, but you can override it by passing centerTitle: true
as an argument to the AppBar
constructor.
Example:
AppBar(
centerTitle: true, // this is all you need
...
)
这篇关于如何将应用栏标题居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!