如何在 flutter 中制作類似於 appbar 的 Whatsapp

Question

我正在創建一個應用程序，我需要在其中實現像 AppBar 這樣的 WhatsApp，即在向下滾動時隱藏應用程序欄並在反向時顯示。

Answer 1

您可以使用SliverAppBar和CustomScrollView來實現此效果。 示例實現：

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: false,
          snap: false,
          floating: false,
          expandedHeight: 160.0,
          flexibleSpace: const FlexibleSpaceBar(
            title: Text('AppBar'),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                color: index.isOdd ? Colors.white : Colors.black12,
                height: 100.0,
                child: Center(
                  child: Text('$index', textScaleFactor: 5),
                ),
              );
            },
            childCount: 50,
          ),
        ),
      ],
    ),
  );
}