如何创建appbar,如下图所示:
t98cgbkg1#
(据我所知)有两种方法可以做到这一点
通过Appbar您可以使用AppBar内部的flexibleSpace属性结合SafeArea来实现。
flexibleSpace
SafeArea
AppBar( flexibleSpace: SafeArea( child: Column(...) ) ... )
使用Body可以使用Stack和Positioned小部件
Stack
Positioned
body: Stack( child: Positioned( top: 0 child: ... )
lsmd5eda2#
在Flutter中,AppBar小部件有一个名为appBar的参数,其类型为PreferredSize。PreferredSize类有两个自己的参数:child和preferredSize。您可以创建自己的小部件,并使用这些参数将其设置为AppBar小部件的appBar参数的值。你可以创造出像
AppBar
appBar
PreferredSize
child
preferredSize
class CustomAppBar extends PreferredSize { const CustomAppBar({ super.key, required super.child, required super.preferredSize, }); @override Widget build(BuildContext context) { return Container(); } }
并将其分配给appBar小部件最终的代码看起来像
class Example extends StatefulWidget { const Example({super.key}); @override State<Example> createState() => _ExampleState(); } class _ExampleState extends State<Example> { @override Widget build(BuildContext context) { return Scaffold( appBar: CustomAppBar( preferredSize: Size(width, height), child: const Column( children: [ Row(), Column(), ], ), ) body: const Center( child: Text('Example'), ), ); } }
2条答案
按热度按时间t98cgbkg1#
(据我所知)有两种方法可以做到这一点
通过Appbar您可以使用AppBar内部的
flexibleSpace
属性结合SafeArea
来实现。使用Body可以使用
Stack
和Positioned
小部件lsmd5eda2#
在Flutter中,
AppBar
小部件有一个名为appBar
的参数,其类型为PreferredSize
。PreferredSize
类有两个自己的参数:child
和preferredSize
。您可以创建自己的小部件,并使用这些参数将其设置为AppBar
小部件的appBar
参数的值。你可以创造出像并将其分配给appBar小部件
最终的代码看起来像