Flutter: вкладка NestedScrollView Header TabBar закрывает / перекрывает элементы TabBarView - PullRequest
0 голосов
/ 14 апреля 2020

Моя цель состоит в том, чтобы использовать какую-то страницу профиля, где у меня есть SliverAppBar вверху, у которого есть tabBar в качестве низа, чтобы переключаться между списками или элементами, показанными под AppBar. Я обнаружил, что это заархивировано NestedScrollView, но заметил странное поведение, когда либо с несколькими элементами и прокруткой вверх, когда он все еще прокручивается вверх под панелью вкладок, даже если нет новых элементов для отображения внизу, или когда вы иметь много элементов и хочет использовать какую-то постоянную панель приложений в одном из списков, чтобы, например, иметь текстовое поле, которое следует использовать для сортировки или фильтрации списка.

Я пытался использовать SliverOverlapAbsorber, но это не решило проблему. Ниже я просто показываю пример кода без него: я думал о вставке Контейнера, который изменяет его высоту в соответствии с позицией прокрутки, чтобы «решить» эту проблему, но я предпочел бы правильный способ сделать это ..

Вот рисунок, иллюстрирующий проблему: 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,
      ),
    );
  }






}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...