Как я могу просто установить высоту AppBar
во Flutter?
Заголовок панели должен оставаться по центру по вертикали (в этом AppBar
).
dart
material-design
flutter
Бугра Экуклу
источник
источник
AppBar
, а не о ее «настройке».Ответы:
Вы можете использовать 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: // ... ) ); } }
источник
centerTitle
свойство, чтобы центрировать его.AppBar
Вы можете использовать
PreferredSize
иflexibleSpace
для этого:appBar: PreferredSize( preferredSize: Size.fromHeight(100.0), child: AppBar( automaticallyImplyLeading: false, // hides leading widget flexibleSpace: SomeWidget(), ) ),
Таким образом, вы можете оставить
elevation
of,AppBar
чтобы тень оставалась видимой, и иметь настраиваемую высоту, что я и искал. Однако вам необходимо установить интервалSomeWidget
.источник
На момент написания этого я не знал об этом
PreferredSize
. Ответ Цинна лучше всего подходит для этого.Вы можете создать свой собственный виджет с произвольной высотой:
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), ), ), ); } }
источник
В дополнение к ответу @Cinn вы можете определить такой класс
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 ); }
или так
class MyAppBar extends PreferredSize { MyAppBar({Key key, Widget title}) : super( key: key, preferredSize: Size.fromHeight(50), child: AppBar( title: title, // maybe other AppBar properties ), ); }
а потом использовать вместо стандартного
источник
Ответ Цинна великолепен, но в нем есть одна ошибка.
PreferredSize
Виджет будет немедленно начать в верхней части экрана, без учета строки состояния, так что некоторые из его высоты будут омрачены высотой строки состояния. Это также учитывает боковые выемки.Решение : оберните
preferredSize
ребенкаSafeArea
appBar: PreferredSize( //Here is the preferred height. preferredSize: Size.fromHeight(50.0), child: SafeArea( child: AppBar( flexibleSpace: ... ), ), ),
Если вы не хотите использовать свойство flexibleSpace, в этом нет необходимости, потому что другие свойства объекта
AppBar
будут автоматически учитывать строку состояния.источник
SafeArea
чтобы уменьшить высоту строки состояния, но вы добавили ее снова с помощьюMediaQuery.of(context).padding.top
? Думаю, SafeArea здесь не нужна.SafeArea
Важно, чтобы панель приложения не перекрывалась со строкой состояния, но наMediaQuery.of(context).padding.top
самом деле в этом нет необходимости. Ответ отредактировал, спасибо.Если вы находитесь в Visual Code, Ctrl + щелчок по функции AppBar.
И отредактируйте этот кусок.
app_bar.dart will open and you can find preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
Разница в росте!
источник