Jak mogę po prostu ustawić wysokość AppBar
in Flutter?
Tytuł paska powinien pozostać wyśrodkowany w pionie (w tym AppBar
).
dart
material-design
flutter
Buğra Ekuklu
źródło
źródło
AppBar
, a nie „ustawienie” jej.Odpowiedzi:
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: // ... ) ); } }
źródło
centerTitle
właściwości, aby ją wyśrodkować.AppBar
Możesz użyć
PreferredSize
iflexibleSpace
do tego:appBar: PreferredSize( preferredSize: Size.fromHeight(100.0), child: AppBar( automaticallyImplyLeading: false, // hides leading widget flexibleSpace: SomeWidget(), ) ),
W ten sposób można zachować
elevation
odAppBar
za utrzymanie jego cień widoczne i mają niestandardową wysokość, która jest co właśnie szukają. Musisz jednak ustawić odstępySomeWidget
.źródło
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), ), ), ); } }
źródło
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
źródło
Odpowiedź Cinna jest świetna, ale jest jedna rzecz nie tak.
Plik
PreferredSize
Widget 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ń
preferredSize
dziecko 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
AppBar
will automatycznie uwzględniają pasek stanu.źródło
SafeArea
czy zmniejszyć wysokość paska stanu, ale dodałeś go ponownie za pomocąMediaQuery.of(context).padding.top
? Myślę, że SafeArea nie jest tutaj potrzebna.SafeArea
Jest ważne, aby pasek aplikacji nie nakładał się na pasek stanu, ale wMediaQuery.of(context).padding.top
rzeczywistości nie jest potrzebny. Poprawiłem odpowiedź, dzięki.Możesz użyć właściwości toolbarHeight w Appbar, robi dokładnie to, co chcesz.
źródło
Zastosowanie
toolbarHeight
:Nie ma już potrzeby używania
PreferredSize
. UżywajtoolbarHeight
zflexibleSpace
.AppBar( toolbarHeight: 120, // Set this height flexibleSpace: Container( color: Colors.orange, child: Column( children: [ Text('1'), Text('2'), Text('3'), Text('4'), ], ), ), )
źródło
Jeśli jesteś w kodzie wizualnym, Ctrl + kliknij funkcję AppBar.
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!
źródło