如何在 Flutter 中简单地设置 AppBar 的高度？
栏的标题应保持垂直居中（即AppBar）。
【问题讨论】：
AppBar 的高度，而不是“设置”它。
标签： dart material-design flutter
你可以使用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 属性将其居中。
您可以使用PreferredSize 和flexibleSpace：
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: SomeWidget(),
)
),
这样您可以保持AppBar 的elevation 以保持其阴影可见并具有自定义高度，这正是我想要的。不过，您必须在 SomeWidget 中设置间距。
【讨论】：
toolbarHeight 属性示例：
AppBar(
title: Text('Flutter is great'),
toolbarHeight: 100,
),
您可以在 appBar 中添加
flexibleSpace属性以获得更大的灵活性
输出：
示例：
appBar: PreferredSize(
preferredSize: Size(100, 80), //width and height
// The size the AppBar would prefer if there were no other constraints.
child: SafeArea(
child: Container(
height: 100,
color: Colors.red,
child: Center(child: Text('Fluter is great')),
),
),
),
如果您没有安全区域，请不要忘记使用
SafeArea小部件
输出：
【讨论】：
toolBarHeight 解决方案，第二个“对于更多控件，请使用 PreferedSize”——不一定，toolbarHeight 做得很好。
在写这篇文章的时候，我还不知道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),
),
),
);
}
}
【讨论】：
除了@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
),
);
}
然后用它代替标准的
【讨论】：
Cinn's answer 很棒，但有一件事有问题。
PreferredSize 小部件将立即从屏幕顶部开始，不考虑状态栏，因此它的一些高度会被状态栏的高度所遮蔽。这也说明了侧面的缺口。
解决方案：用SafeArea包裹preferredSize的孩子
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。我已经编辑了答案，谢谢。
只需使用工具栏高度 ...
AppBar(
title: Text("NASHIR'S APP"),
toolbarHeight: 100,
),
【讨论】：
您可以使用 Appbar 的 toolbarHeight 属性，它完全符合您的要求。
【讨论】：
你可以使用toolbarHeight
return MaterialApp(
home: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: white,
toolbarHeight: 70,
title: Align(
alignment: Alignment.centerRight,
child: Text(
'Complete Installments',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: black
),
),
)
),
),
);
【讨论】：
你可以使用PreferredSize，通过这个使用可以在他们的内部设置多个子部件
appBar: PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width, 75),
child: Column(children: [
AppBar(
centerTitle: true,
toolbarHeight: 74,
backgroundColor: Colors.white,
elevation: 0,
title: Column(
children: [
Text(
viewModel.headingText,
style: sfDisplay16500Text,
),
SizedBox(
height: 8.0,
),
Text(
viewModel.url.toString(),
style: sfDisplay10400LightBlackText,
maxLines: 1,
overflow: TextOverflow.ellipsis,
)
],
),
),
]),
),
或者直接使用toolbarHeight属性只增加appBar的高度。
appBar: AppBar(
title: Text('AppBar Texr'),
toolbarHeight: 200.0, // double
),
【讨论】：
扩展 AppBar 类并覆盖 preferredSize
class AppBarCustom extends AppBar {
@override
Size get preferredSize => Size.fromHeight(100);
}
然后像使用 AppBar 类一样使用它
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBarCustom(),
body:
),
);
}
}
【讨论】：
这是在不更改原始主题的情况下更改 appbar 高度的最简单和最简单的方法。
class AppBarSectionView extends StatefulWidget implements PreferredSizeWidget {
const AppBarSectionView({Key? key}) : super(key: key);
@override
_AppBarSectionViewState createState() => _AppBarSectionViewState();
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight + 20);
}
class _AppBarSectionViewState extends State<AppBarSectionView> {
@override
Widget build(BuildContext context) {
return AppBar(
toolbarHeight: widget.preferredSize.height ,
backgroundColor: Colors.red,
leading: const Icon(Icons.arrow_back_ios_rounded),
title: const Text("This Is Title"),
);
}
}
【讨论】：
如果您在 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)),
身高差！
【讨论】：