Wie kann ich einfach die Höhe des AppBar
in Flutter einstellen ?
Der Titel der Leiste sollte vertikal zentriert bleiben (darin AppBar
).
dart
material-design
flutter
Buğra Ekuklu
quelle
quelle
AppBar
, nicht " einzustellen ".Antworten:
Sie können PreferredSize verwenden :
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Example', home: Scaffold( appBar: PreferredSize( preferredSize: Size.fromHeight(50.0), // here the desired height child: AppBar( // ... ) ), body: // ... ) ); } }
quelle
centerTitle
Eigenschaft verwenden, um sie zu zentrieren.AppBar
Sie können
PreferredSize
undflexibleSpace
dafür verwenden:appBar: PreferredSize( preferredSize: Size.fromHeight(100.0), child: AppBar( automaticallyImplyLeading: false, // hides leading widget flexibleSpace: SomeWidget(), ) ),
Auf diese Weise können Sie das
elevation
vonAppBar
beibehalten, um den Schatten sichtbar zu halten, und eine benutzerdefinierte Höhe haben, nach der ich gerade gesucht habe. Sie müssen jedoch den Abstand einstellenSomeWidget
.quelle
Zum Zeitpunkt des Schreibens war mir dies nicht bewusst
PreferredSize
. Cinns Antwort ist besser, um dies zu erreichen.Sie können Ihr eigenes benutzerdefiniertes Widget mit einer benutzerdefinierten Höhe erstellen:
import "package:flutter/material.dart"; class Page extends StatelessWidget { @override Widget build(BuildContext context) { return new Column(children : <Widget>[new CustomAppBar("Custom App Bar"), new Container()],); } } class CustomAppBar extends StatelessWidget { final String title; final double barHeight = 50.0; // change this for different heights CustomAppBar(this.title); @override Widget build(BuildContext context) { final double statusbarHeight = MediaQuery .of(context) .padding .top; return new Container( padding: new EdgeInsets.only(top: statusbarHeight), height: statusbarHeight + barHeight, child: new Center( child: new Text( title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold), ), ), ); } }
quelle
Zusätzlich zu @ Cinns Antwort können Sie eine Klasse wie diese definieren
class MyAppBar extends AppBar with PreferredSizeWidget { @override get preferredSize => Size.fromHeight(50); MyAppBar({Key key, Widget title}) : super( key: key, title: title, // maybe other AppBar properties ); }
oder so
class MyAppBar extends PreferredSize { MyAppBar({Key key, Widget title}) : super( key: key, preferredSize: Size.fromHeight(50), child: AppBar( title: title, // maybe other AppBar properties ), ); }
und dann verwenden Sie es anstelle von Standard
quelle
Cinns Antwort ist großartig, aber eines stimmt nicht.
Das
PreferredSize
Widget wird sofort am oberen Bildschirmrand gestartet, ohne die Statusleiste zu berücksichtigen, sodass ein Teil seiner Höhe von der Höhe der Statusleiste überschattet wird. Dies erklärt auch die seitlichen Kerben.Die Lösung : Wickeln Sie das
preferredSize
Kind mit einemSafeArea
appBar: PreferredSize( //Here is the preferred height. preferredSize: Size.fromHeight(50.0), child: SafeArea( child: AppBar( flexibleSpace: ... ), ), ),
Wenn Sie die flexibleSpace-Eigenschaft nicht verwenden möchten, ist dies alles nicht erforderlich, da die anderen Eigenschaften von
AppBar
automatisch die Statusleiste berücksichtigen.quelle
SafeArea
soll die Höhe der Statusleiste reduziert werden, hast du sie aber nochmal hinzugefügt mitMediaQuery.of(context).padding.top
? Ich denke, SafeArea wird hier nicht benötigt.SafeArea
ist wichtig, damit sich die App-Leiste nicht mit der Statusleiste überschneidet, aber dasMediaQuery.of(context).padding.top
wird eigentlich nicht benötigt. Ich habe die Antwort bearbeitet, danke.Wenn Sie sich in Visual Code befinden, drücken Sie Strg + Klicken Sie auf die AppBar-Funktion.
Und bearbeiten Sie dieses Stück.
app_bar.dart will open and you can find preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
Höhenunterschied!
quelle