首页 > 解决方案 > 使用 NestedScrollView 如果正文仍然适合屏幕,我如何阻止正文在 headerSliv​​erBuilder 下滚动

问题描述

我正在创建一个 Sliver 滚动,但我注意到即使主体足够小以适合屏幕,主体仍会在 NestedScrollView header. 我的理想体验是 SliverAppBar Collapse 但正文中的每个项目都留在它下面并且不会滑到下面。

我面临的情况示例

这是一个代码片段:

    class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: DefaultTabController(
        length: 3,
        child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          elevation: 0,
          title: const Text('HOME',),
          backgroundColor: Colors.green,
          pinned: true,
          stretchTriggerOffset: 10,
          onStretchTrigger: () async{
            print('hello');
            return;
          },
          automaticallyImplyLeading: false,
          actions: const [
            Padding(
              padding: EdgeInsets.only(right: 30),
              child: Icon(Icons.ac_unit),
            )
          ],
          expandedHeight: 120,
          flexibleSpace: const FlexibleSpaceBar(
            title: Text('Charity',style:
            TextStyle(fontSize: 25,
                fontWeight: FontWeight.bold,
                color: Colors.white),),
            stretchModes: [
              StretchMode.fadeTitle
            ],
          ),
        ),
      ];
    },
    body: SafeArea(
      top: false,
      bottom: false,
      child: Builder(
        builder: (BuildContext context) {
          return CustomScrollView(
            slivers: <Widget>[
              SliverPadding(
                padding: EdgeInsets.only(left: 16, right: 16, top: 11),
                sliver: SliverList(
                  delegate: SliverChildListDelegate(List.generate(
                    6,
                        (index) => Text('Tab One: $index'),
                  ),
                 ),
                ),
              ),
            ],
          );
        },
      ),
    ),
        ),
      ),
    );

  }
}

如果它不够小以适合页面,我怎样才能使它不会在标题下滚动?

标签: flutter

解决方案


推荐阅读