Question

我的目标是使用某种配置文件页面，其中我的顶部是SliverAppBar，底部是tabBar，以便在AppBar下方显示的列表或元素之间切换。我发现它是由NestedScrollView存档的，但是当它只有几个元素并向上滚动时仍注意到一个奇怪的行为，即使它在选项卡栏下仍向上滚动，甚至在底部也没有新元素显示，或者当您有很多项目，并且想要在列表之一中使用某种持久性应用栏，例如要有一个文本字段，应使用该字段对列表进行排序或过滤。

我尝试使用SliverOverlapAbsorber，但无法解决问题。所以下面我只显示没有它的示例代码：我曾考虑过要插入一个根据滚动位置更改其高度的容器，以“解决”此问题，但我更喜欢使用正确的方法来实现此目的。

以下是说明问题的gif： https://gfycat.com/decentoccasionalhyena https://gfycat.com/fastslightekaltadeta


import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'package:widgettests/widgets/sliverHeader.dart';


class NestedTabbarSliverOverpaling extends StatefulWidget {
  @override
  _NestedTabbarSliverOverpalingState createState() => _NestedTabbarSliverOverpalingState();
}

class _NestedTabbarSliverOverpalingState extends State<NestedTabbarSliverOverpaling> with TickerProviderStateMixin {
  ScrollController _scrollController;
  TabController _tabController;

  @override
  void initState() {
    super.initState();

    _scrollController = new ScrollController();
    _tabController = new TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    _tabController.dispose();
    super.dispose();
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        physics: BouncingScrollPhysics(),
        dragStartBehavior: DragStartBehavior.start,
        headerSliverBuilder: (context, innerBoxIsScrolled) =>
        <Widget>[
        SliverAppBar(
          pinned: true,
          expandedHeight: 100,
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(-5),
            child: TabBar(
                controller: _tabController,
                labelColor: Colors.white,
                tabs: <Widget>[Tab(text: '1st List',), Tab(text: '2nd List',),]
            ),
          ),
        ),

        ],
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            SafeArea(
              top: false,
              bottom: false,
              child: _buildfirstList(context),
            ),

            SafeArea(
              top: false,
              bottom: false,
              child: _build2ndList(context),
            ),

          ],
        ),
      ),
    );
  }


  Widget _buildfirstList(BuildContext context) {
    final children = <Widget>[
      CustomScrollView(
        key: PageStorageKey<String>('1st'),
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Colors.blueGrey,
            floating: true,
            snap: true,
            title: TextField(
              showCursor: false,
            ),
            titleSpacing: 2,
          ),
          _List(),
          //SliverFillRemaining(),
        ],
      ),

    ];

    return Stack(
      children: children,
    );
  }

  Widget _build2ndList(BuildContext context) {
    final children = <Widget>[
      CustomScrollView(
        key: PageStorageKey<String>('2nd'),
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _List(),
          //SliverFillRemaining(),
        ],
      ),

    ];

    return Stack(
      children: children,
    );
  }


  Widget _List() {
    return SliverList(
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return new ListTile(
          title: Text('tile no. ${index}'),
        );
      },
        childCount: 55,
      ),
    );
  }






}

Flutter：NestedScrollView标头TabBar阻塞/重叠TabBarView元素

0 个答案: