Flattern: Einstellen der Höhe der AppBar

105

Wie kann ich einfach die Höhe des AppBarin Flutter einstellen ?

Der Titel der Leiste sollte vertikal zentriert bleiben (darin AppBar).

Buğra Ekuklu
quelle
@Mans Es geht darum, die Höhe des zu "bekommen" AppBar, nicht " einzustellen ".
Buğra Ekuklu
1
Haben Sie einen Blick nahm dies ? Sie können auch ein eigenes Widget als AppBar erstellen und dessen Höhe festlegen.
Bostrot
@ Leviathlon mein schlechtes. Überprüfen Sie meine Antwort auf (hoffentlich) bessere Hilfe
Mans

Antworten:

197

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: // ...
      )
    );
  }
}
Cinn
quelle
5
Dies vergrößert die AppBar, zentriert den Text jedoch nicht.
Duncan Jones
5
Sie können die centerTitleEigenschaft verwenden, um sie zu zentrieren.
CopsOnRoad
11
@CopsOnRoad Das zentriert es horizontal, aber nicht vertikal.
Giraldi
1
@ Giraldi Sie können das nicht wirklich tun, ohne die Quelldatei zu ändern oder Ihre benutzerdefinierte zu AppBar
erstellen
1
@CopsOnRoad Ich weiß, aber ich habe nur darauf hingewiesen, was das OP verlangt.
Giraldi
43

Sie können PreferredSizeund flexibleSpacedafü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 elevationvon AppBarbeibehalten, um den Schatten sichtbar zu halten, und eine benutzerdefinierte Höhe haben, nach der ich gerade gesucht habe. Sie müssen jedoch den Abstand einstellen SomeWidget.

Fußgänger
quelle
Dies sollte als Antwort akzeptiert werden! Vielen Dank.
Hazaaa
14

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),
        ),
      ),
    );
  }
}
Mans
quelle
9

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

Pavel
quelle
4

Cinns Antwort ist großartig, aber eines stimmt nicht.

Das PreferredSizeWidget 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 preferredSizeKind 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 AppBarautomatisch die Statusleiste berücksichtigen.

TN888
quelle
aber SafeAreasoll die Höhe der Statusleiste reduziert werden, hast du sie aber nochmal hinzugefügt mit MediaQuery.of(context).padding.top? Ich denke, SafeArea wird hier nicht benötigt.
Ryde
@Ryde Das SafeAreaist wichtig, damit sich die App-Leiste nicht mit der Statusleiste überschneidet, aber das MediaQuery.of(context).padding.topwird eigentlich nicht benötigt. Ich habe die Antwort bearbeitet, danke.
TN888
-10

Wenn Sie sich in Visual Code befinden, drücken Sie Strg + Klicken Sie auf die AppBar-Funktion.

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

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!

Beispielbild

Beispielbild

goops17
quelle
1
Darum hat er nicht gebeten. Er möchte, dass der Titel vertikal zentriert ist
Rémi Rousselet
centerTitle: true; kann verwendet werden, um es zu tun.
Goops17
vertikale Mitte, nicht horizontal
Rémi Rousselet
Es liest also keine neue Höhe. Ich denke nicht, dass es eine gute Idee wäre, eine Quelldatei wie app_bar.dart zu basteln, um sie zu ändern.
Goops17
6
Es ist eine sehr schlechte Idee, jemals Quellen eines Frameworks zu bearbeiten. Es wird Ihre App beschädigen, wenn Sie das Framework aktualisieren.
Konstantin