我想在flutter中实现这个嵌套列表UI

Question

我们如何在 flutter 中实现这个 UI？

顶行按钮在向上滚动时隐藏，在向下滚动时可见，并且列表视图包裹在卡片小部件中。

https://youtube.com/shorts/6e3q47AMXoU?si=428FC8uTk3TSJcTt

Answer 1

您可以使用 SliverAppBar 和 CustomScrollView

的组合来归档标题，该标题在用户向下滚动时隐藏并在向上滚动时显示

这是一个基本示例：

Scaffold(
        body: SafeArea(
          child: CustomScrollView(
            slivers: <Widget>[
              const SliverAppBar(
                floating: true,
                snap: true,
                backgroundColor: Colors.blue,
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Icon(Icons.history_rounded,color: Colors.white,size: 30,),
                    Icon(Icons.wallet,color: Colors.white,size: 30),
                    Icon(Icons.inventory_outlined,color: Colors.white,size: 30),
                  ],
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return ListTile(
                      title: Text('Your Data $index'),
                    );
                  },
                  childCount: 20,
                ),
              ),
            ],
          ),
        ),
    )