Как я могу просто установить высоту AppBar
в Flutter?
Заголовок панели должен находиться в центре вертикально (в этом AppBar
).
Как я могу просто установить высоту AppBar
в Flutter?
Заголовок панели должен находиться в центре вертикально (в этом AppBar
).
На момент написания этой статьи я не знал о PreferredSize
. Ответ Cinn лучше достичь этого.
Вы можете создать свой собственный виджет с пользовательской высотой:
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),
),
),
);
}
}
Вы можете использовать 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: // ...
)
);
}
}
Для этого вы можете использовать PreferredSize
и flexibleSpace
:
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: SomeWidget(),
)
),
Таким образом, вы можете сохранить elevation
AppBar
чтобы ее тень была видимой и иметь собственную высоту, что я и искал. Вы должны установить интервал в SomeWidget
, хотя.
В дополнение к ответу @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
),
);
}
а затем использовать его вместо стандартного
Appbar
есть постоянная высота. Его нельзя каким-либо образом изменить.
Если вы находитесь в Visual Code, нажмите Ctrl + Click на функции 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)),
Разница высоты!