Flutter: ustawianie wysokości AppBar

110

Jak mogę po prostu ustawić wysokość AppBar in Flutter?

Tytuł paska powinien pozostać wyśrodkowany w pionie (w tym AppBar).

Buğra Ekuklu
źródło
@Mans Chodzi o „uzyskanie” wysokości AppBar, a nie „ustawienie” jej.
Buğra Ekuklu
1
Czy spojrzałeś na to ? Możesz także stworzyć swój własny widżet jako AppBar i ustawić jego wysokość.
Bostrot
@Leviathlon my bad. sprawdź moją odpowiedź na (miejmy nadzieję) lepszą pomoc
Mans

Odpowiedzi:

209

Możesz użyć PreferredSize :

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
źródło
5
Zwiększa to rozmiar AppBar, ale nie wyśrodkowuje tekstu.
Duncan Jones
5
Możesz użyć centerTitlewłaściwości, aby ją wyśrodkować.
CopsOnRoad
11
@CopsOnRoad To wyśrodkowuje go w poziomie, ale nie wyśrodkuje w pionie.
Giraldi
1
@Giraldi Naprawdę nie możesz tego zrobić bez zmiany pliku źródłowego lub stworzenia własnegoAppBar
CopsOnRoad
1
@CopsOnRoad Wiem, ale właśnie wskazywałem, o co prosi OP.
Giraldi
46

Możesz użyć PreferredSizei flexibleSpacedo tego:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

W ten sposób można zachować elevationod AppBarza utrzymanie jego cień widoczne i mają niestandardową wysokość, która jest co właśnie szukają. Musisz jednak ustawić odstępy SomeWidget.

footurist
źródło
To powinna zostać zaakceptowana odpowiedź! Dziękuję Ci bardzo.
Hazaaa
14

W chwili pisania tego nie byłem tego świadomy PreferredSize. Odpowiedź Cinna jest lepsza do osiągnięcia tego.

Możesz stworzyć swój własny widżet o niestandardowej wysokości:

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
źródło
10

Oprócz odpowiedzi @ Cinn możesz zdefiniować taką klasę

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

lub w ten sposób

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // maybe other AppBar properties
    ),
  );
}

a następnie użyj go zamiast standardowego

Pavel
źródło
4

Odpowiedź Cinna jest świetna, ale jest jedna rzecz nie tak.

Plik PreferredSizeWidget rozpocznie się natychmiast w górnej części ekranu, bez uwzględnienia na pasku stanu, więc niektóre z jej wysokość zostanie zasłonięta przez wysokość paska stanu jest. Dotyczy to również bocznych nacięć.

Rozwiązanie : owiń preferredSizedziecko rozszerzeniemSafeArea

appBar: PreferredSize(
  //Here is the preferred height.
  preferredSize: Size.fromHeight(50.0),
  child: SafeArea(
    child: AppBar(
      flexibleSpace: ...
    ),
  ),
),

Jeśli nie chcesz używać właściwości flexibleSpace, nie ma takiej potrzeby, ponieważ inne właściwości AppBarwill automatycznie uwzględniają pasek stanu.

TN888
źródło
ale SafeAreaczy zmniejszyć wysokość paska stanu, ale dodałeś go ponownie za pomocą MediaQuery.of(context).padding.top? Myślę, że SafeArea nie jest tutaj potrzebna.
Ryde,
@Ryde SafeAreaJest ważne, aby pasek aplikacji nie nakładał się na pasek stanu, ale w MediaQuery.of(context).padding.toprzeczywistości nie jest potrzebny. Poprawiłem odpowiedź, dzięki.
TN888
1

Możesz użyć właściwości toolbarHeight w Appbar, robi dokładnie to, co chcesz.

Sami Belaid
źródło
1

Zastosowanie toolbarHeight:

wprowadź opis obrazu tutaj


Nie ma już potrzeby używania PreferredSize. Używaj toolbarHeightz flexibleSpace.

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)
CopsOnRoad
źródło
-10

Jeśli jesteś w kodzie wizualnym, Ctrl + kliknij funkcję AppBar.

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

I edytuj ten kawałek.

app_bar.dart will open and you can find 
    preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

Różnica wysokości!

przykładowy obraz

przykładowy obraz

goops17
źródło
1
Nie o to prosił. Chce, aby tytuł był wyśrodkowany w pionie
Rémi Rousselet
centerTitle: true; można to zrobić.
goops17
środek pionowy, nie poziomy
Rémi Rousselet
Więc nie czyta nowej wysokości. Nie sądzę jednak, aby majstrowanie przy pliku źródłowym, takim jak app_bar.dart, aby go zmienić, było dobrym pomysłem.
goops17
6
To bardzo zły pomysł, aby kiedykolwiek edytować źródła frameworka. Jeśli zaktualizujesz framework, zepsuje to twoją aplikację.
Konstantin