颤动: 设置 AppBar 的高度

我怎样才能简单地设置在 Flutter 的 abc 0的高度？

酒吧的标题应该保持垂直居中(在该 AppBar)。

212282 次浏览
小开

如果使用 VisualCode，则 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)),

身高不一样！

sample image

sample image

小开

在写这篇文章的时候，我还不知道 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),
),
),
);
}
}
小开
最佳答案

你可以使用 首选尺寸:

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(),
)
),

这样，你可以保持 AppBar的 elevation的阴影可见，并有自定义的高度，这是我正在寻找。但是，您必须在 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
),
);
}

然后用它来代替标准的

小开

Cinn 的回答 很棒，但是 还有一件事有问题。

PreferredSize小部件将立即在屏幕顶部启动，而不考虑状态栏，因此它的一些高度将被状态栏的高度所遮蔽。这也解释了侧面缺口。

解决方案 : 用 SafeArea包装 preferredSize的子代

appBar: PreferredSize(
//Here is the preferred height.
preferredSize: Size.fromHeight(50.0),
child: SafeArea(
child: AppBar(
flexibleSpace: ...
),
),
),

如果您不想使用 flebleSpace 属性，那么就没有必要这么做，因为 AppBar的其他属性将自动占用状态栏。

小开

你可以使用 Appbar 的 toolbarHeight 属性，它可以做你想做的事情。

小开

使用 toolbarHeight:

enter image description here

不再需要使用 PreferredSize。使用 toolbarHeight和 flexibleSpace。

AppBar(
toolbarHeight: 120, // Set this height
flexibleSpace: Container(
color: Colors.orange,
child: Column(
children: [
Text('1'),
Text('2'),
Text('3'),
Text('4'),
],
),
),
)
小开

最简单的方法是在 AppBar 中使用 toolbarHeight属性

例如:

AppBar(
title: Text('Flutter is great'),
toolbarHeight: 100,
),

您可以在 appBar 中添加 flexibleSpace属性，以获得更大的灵活性

产出 :

enter image description here

有关更多控件，请使用 首选尺寸小部件创建您自己的应用程序栏

例子 :

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小部件

产出:

enter image description here

小开

您可以简单地使用 toolbarHeight，如下所示:

        appBar: AppBar(
toolbarHeight: 70.0, // add this line
centerTitle: true,   // add this line
title: Text('your title'),
),

但是如果您有任何操作，上面的代码将不能按照您希望的方式工作 你可以用这个代码

AppBar(
centerTitle: true,
title: Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.center,
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Chats', style: TextStyle(color:Colors.black),),
Icon(Icons.add, color: Colors.black,),
],
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.add, color: Colors.black,),
),
],
),
),
)
小开

扩展 AppBar 类并重写 尺寸

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(
title: Text("NASHIR'S APP"),
toolbarHeight: 100,
),
小开

这是在不改变原始主题的情况下更改应用程序栏高度的最简单和最容易的方法。


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"),
);
}
}
小开

您可以使用 < strong > 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,
)
],
),
),
]),
),

或者直接使用 一个 href = “ https://api.flutter.dev/flutter/Materials/AppBar/toolbarHeight.html”rel = “ nofollow noReferrer”> toolbarHeight 属性只增加应用程序栏的高度。

appBar: AppBar(
title: Text('AppBar Texr'),
toolbarHeight: 200.0, // double
),
小开 
class AppBarWidget extends StatelessWidget with PreferredSizeWidget {
final String title;
const AppBarWidget({Key? key, required this.title}) : super(key: key);


@override`enter code here`
Widget build(BuildContext context) {
return AppBar(


title: Text(title),
centerTitle: true,
elevation: 0,
actions: [
Padding(
padding: const EdgeInsets.only(right: 10),
child: IconButton(
icon: const FaIcon(FontAwesomeIcons.language),
onPressed: () {},
),
),
    

],
);
}


@override


Size get preferredSize => const Size.fromHeight(40);// change
}

提交答案