2017-05-15 4 views
1

Ich versuche, den Titeltext in einer App-Leiste zu zentrieren, die sowohl eine führende als auch eine nachgestellte Aktion aufweist.So zentrieren Sie den Titel einer 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. 
); 
} 

Das funktioniert gut, mit Ausnahme der Titel wird auf der linken Seite ausgerichtet, wie in diesem Bild zu sehen ist:

TITLE TO THE LEFT

Wie ich versuchen, den Titel in der Mitte zu schließen, scheint es, dass es auch ist viel nach links:

@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. 
); 
} 

TITLE NOT WELL CENTERED

Ich hätte gerne eine Lösung, um den Titeltext perfekt zwischen den 2 Icons zu zentrieren. Vielen Dank,

Antwort

2

Zentrierung des Titels ist die Standardeinstellung auf iOS. Unter Android ist der Titel der AppBar standardmäßig linksbündig, Sie können ihn jedoch überschreiben, indem Sie centerTitle: true als Argument an den Konstruktor AppBar übergeben.

Verwandte Themen