Ich versuche, den Titeltext in einer App-Leiste zu zentrieren, die sowohl eine führende als auch eine nachfolgende Aktion enthält.
@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.
);
}
Dies funktioniert gut, außer dass der Titel links ausgerichtet ist, wie in diesem Bild gezeigt:
Wenn ich versuche, den Titel in die Mitte aufzunehmen, scheint es zu viel links zu sein:
@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.
);
}
Ich würde eine Lösung lieben, um den Titeltext perfekt zwischen den beiden Symbolen zu zentrieren.
Ich hatte das gleiche Problem und es funktionierte schließlich, als ich
meinem Zeilen- Widget die Datei mainAxisSize: MainAxisSize.min hinzufügte . Ich hoffe das hilft!
quelle
So mache ich centerTitle in meiner Appbar:
quelle
In meinem Fall wollte ich ein zentriertes Logo / Bild anstelle eines Textes. In diesem Fall
centerTitle
ist das nicht genug (nicht sicher warum, ich habe eine SVG-Datei, vielleicht ist das der Grund ...), also zum Beispiel:zentriert das Bild nicht wirklich (außerdem kann das Bild zu groß sein usw.). Was für mich gut funktioniert, ist ein Code wie dieser:
quelle
quelle
Nachdem ich viele Lösungen ausprobiert hatte, half mir dies
centerTitle: true
, zusätzlich zur Antwort von @Collin Jackson Beispielcode hinzuzufügenBeispiel in
build(BuildContext context)
mach das
quelle
Hier ist ein anderer Ansatz, wenn Sie einen benutzerdefinierten Titel in der App-Leiste erstellen möchten. Sie möchten beispielsweise ein Bild und einen Text in der Mitte der App-Leiste hinzufügen
Hier haben wir ein
Row
mit erstellt,MainAxisAlignment.center
um die Kinder zu zentrieren. Dann haben wir zwei Kinder hinzugefügt - Ein Symbol und einContainer
mit Text. Ich habe dasText
Widget in das eingewickeltContainer
, um die erforderliche Polsterung hinzuzufügen.quelle
Dies kann beim Erstellen von Appbar-Titeltext in der Mitte hilfreich sein. Sie können Ihre gewünschten Stile mithilfe von Stil hinzufügen oder bei Bedarf kommentieren.
Auf App-Anzeige:
quelle
Verwenden
Center
Objektquelle
quelle