Как я могу просто установить высоту AppBar
во Flutter?
Заголовок панели должен оставаться по центру по вертикали (в этом AppBar
).
Как я могу просто установить высоту AppBar
во 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.
Widget demoPage() {
AppBar appBar = AppBar(
title: Text('Demo'),
);
return Scaffold(
appBar: appBar,
body: /*
page body
*/,
);
}
И отредактируйте этот кусок.
app_bar.dart will open and you can find
preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
Разница в росте!
AppBar
, а не о ее «настройке».