row在appbar Flutter 时创建两行

yhqotfr8  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(120)

如何创建appbar,如下图所示:

t98cgbkg

t98cgbkg1#

(据我所知)有两种方法可以做到这一点

通过Appbar您可以使用AppBar内部的flexibleSpace属性结合SafeArea来实现。

AppBar(
  flexibleSpace: SafeArea(
    child: Column(...)
  )
...
)

使用Body可以使用StackPositioned小部件

body: Stack(
  child: Positioned(
     top: 0
     child: ...
  )
lsmd5eda

lsmd5eda2#

在Flutter中,AppBar小部件有一个名为appBar的参数,其类型为PreferredSizePreferredSize类有两个自己的参数:childpreferredSize。您可以创建自己的小部件,并使用这些参数将其设置为AppBar小部件的appBar参数的值。你可以创造出像

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'),
      ),
    );
  }
}

相关问题