SliverAppBar () не сворачивается с ListView в Flutter - PullRequest
Новая
       14

SliverAppBar () не сворачивается с ListView в Flutter

1 голос
/ 17 января 2020

Я пытаюсь отобразить вкладки для каждой главной вкладки (Nested Tab Bar) в SliverAppBar(). Это выглядит так:

См. Изображение

См. GIF

Содержимое вкладки экзамена находится в Container() виджет (что ошибка в изображении произошла). Теперь, с виджетом Container(), SliverAppBar() рухнет, когда пользователь прокрутит содержимое вкладки экзамена (белый экран на изображении), пока все в порядке.

Итак, после того, как я заменил Container() с помощью ListView.builder() для прокрутки содержимого вкладки, теперь я не могу свернуть SliverAppBar() из содержимого вкладки (белый экран на изображении). но я могу из SliverAppBar().

увидеть этот GIF после того, как я добавил ListView.builder ()

Итак, как я могу сделать прокрутку SliverAppBar (сворачивание) с Listview? Может кто-нибудь помочь мне? пожалуйста: (

Этот пример (демо): 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'SliverAppBar App Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverOverlapAbsorber(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  child: SliverSafeArea(
                    top: false,
                    sliver: SliverAppBar(
                      pinned: true,
                      title: Text(widget.title),
                      expandedHeight: 500,
                    ),
                  ),
                ),
                SliverPersistentHeader(
                  delegate: _SliverAppBarDelegate(
                    TabBar(tabs: [Tab(text: 'Tab A'), Tab(text: 'Tab B')]),
                    Colors.blue,
                  ),
                  pinned: false,
                ),
              ];
            },
            body: TabBarView(
              children: <Widget>[
                NestedTabs('A'),
                NestedTabs('B'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// This class is to handle the main tabs (Tab A & Tab B)
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar, this._color);

  TabBar _tabBar;
  final Color _color;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      color: _color,
      alignment: Alignment.center,
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

class NestedTabs extends StatelessWidget {
  final String mainTabName;
  NestedTabs(this.mainTabName);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(20),
        child: Container(
          color: Colors.blue,
          alignment: Alignment.bottomCenter,
          child: TabBar(
            tabs: [
              Tab(text: 'Tab $mainTabName-1'),
              Tab(text: 'Tab $mainTabName-2')
            ],
          ),
        ),
      ),
      body: TabBarView(
        children: [
          ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: 500,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                  height: 50,
                  width: 200,
                  color: Colors.black45,
                  child: Center(child: Text('Index ${index}')));
            },
          ),
          ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: 500,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                  height: 50,
                  width: 200,
                  color: Colors.black45,
                  child: Center(child: Text('Index ${index}')));
            },
          )
        ],
      ),
    );
  }
}

Спасибо:)

...