PrefferredSize Widget:
PrefferredSize Widget 用于控制 AppBar。 此小部件不会对其子组件施加任何约束,并且不会以任何方式影响子组件的布局。 它只是宣传可以由父母使用的首选尺寸。
像 Scaffold 这样的父母使用 PreferredSizeWidget 来要求他们的孩子实现该接口。 要为任意小部件提供首选大小,以便可以在该类型的子属性中使用它,可以使用此小部件 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。 使用 toolbarHeight 和 flexibleSpace
AppBar 中的 FlexibleSpace 属性:
此小部件堆叠在工具栏和选项卡栏的后面。 它的高度将与应用栏的整体高度相同。
除非 AppBar 的容器改变了 AppBar 的大小,否则灵活空间实际上并不灵活。 CustomScrollView 中的 SliverAppBar 会在滚动时更改 AppBar 的高度。
AppBar(
toolbarHeight: 120, // Set this height
flexibleSpace: Container(
color: Colors.orange,
child: Column(
children: [
Text('1'),
Text('2'),
Text('3'),
Text('4'),
],
),
),
)
您可以使用 PreferredSize 和 flexibleSpace :
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: Container(),
)
),
您可以使用 PreferredSize 和 flexibleSpace :
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: SomeWidget(),
)
),
这样,您可以保持 AppBar 的高度以保持其阴影可见并具有自定义高度,这正是我想要的。 不过,您必须在 Container() 中设置间距。
关注七爪网,获取更多APP/小程序/网站源码资源!
,