SilverApp 滚动时隐藏不起作用

约翰·乔

当我们向下滚动时,我们想隐藏appBar, only show tabBar,这与Flutter: hide and display app bar in scrolling detected完全一样

但是,它在我们的案例中不起作用。只有当我们单击并滚动appBar.

main.dart

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: NestedScrollView(
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[TabA(), TabA()],
      ),
      floatHeaderSlivers: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            title: Text("Silver App"),
            pinned: true,
            floating: true,
            forceElevated: innerBoxIsScrolled,
            bottom: TabBar(
              unselectedLabelColor: Colors.white,
              labelColor: Colors.white,
              tabs: <Widget>[
                Tab(
                  text: "Tab A",
                ),
                Tab(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("Tab B"),
                      Padding(
                        padding: EdgeInsets.only(left: 15),
                      ),
                    ],
                  ),
                ),
              ],
              controller: _tabController,
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
          ),
        ];
      },
    ));
  } 

TabA.dart

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

class TabA extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabAState();
}

class _TabAState extends State<TabA> with SingleTickerProviderStateMixin {
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      new GlobalKey<RefreshIndicatorState>();

  bool isLoading = false;
  ScrollController _controller;
  int page = 1;
  AnimationController controller;
  Animation<Offset> offset;

  @override
  void initState() {
    super.initState();
    _controller = ScrollController()..addListener(_scrollListener);
    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 2.0))
        .animate(controller);
  }

  final data = [
    'T 0',
    'T 1',
    'T 2',
      ...
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: SlideTransition(
            position: offset,
            child: FloatingActionButton(
                elevation: 0.0,
                child: Icon(Icons.add, color: Colors.white),
                onPressed: () {})),
        body: RefreshIndicator(
            key: _refreshIndicatorKey,
            onRefresh: _refresh,
            child: _showData()));
  }

  void _scrollListener() async {
    if (_controller.position.pixels == _controller.position.maxScrollExtent) {
      // display loading on bottom of listView
    }
    if (_controller.position.userScrollDirection == ScrollDirection.reverse) {
      setState(() {
        controller.forward();
      });
    }
    if (_controller.position.userScrollDirection == ScrollDirection.forward) {
      setState(() {
        controller.reverse();
      });
    }
  }

  Widget _showData() {
    return Stack(
      children: <Widget>[
        _showListView(),
        // Align(
        //   child: Row(
        //       mainAxisAlignment: MainAxisAlignment.center,
        //       children: <Widget>[
        //         Padding(
        //             padding: EdgeInsets.only(bottom: 15),
        //             child: Text("loading .....",
        //                 style: TextStyle(
        //                   color: const Color(0xff000066),
        //                   fontSize: 15,
        //                 ))),
        //         SizedBox(
        //           width: 12,
        //         ),
        //       ]),
        //   alignment: FractionalOffset.bottomCenter,
        // )
      ],
    );
  }

  Widget _showListView() {
    return ListView.builder(
        controller: _controller,
        itemCount: data.length,
        itemBuilder: (context, index) {
          return Text(data[index]);
        });
  }

  Future<void> _refresh() {
    // return data;
  }
}

输出 :

输出

如您所见,滚动appBar时不隐藏listView只有当我们按下appBar并滚动时它才会隐藏

指甲

这是基于您的代码的工作代码。

关键点是“ScrollController”实例由“NestedScrollView”上下文创建
,并将“ScrollController”实例传递到 TabBarView 子项中的“ListView”内部。

在此处输入图片说明

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(initialIndex: 0, length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: NestedScrollView(
      body: Builder(
        builder: (context) {
          final _scr = PrimaryScrollController.of(context);
          return TabBarView(
            controller: _tabController,
            children: <Widget>[TabA(_scr), TabA(_scr)],
          );
        },
      ),
      floatHeaderSlivers: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            title: Text("Silver App"),
            pinned: true,
            floating: true,
            forceElevated: innerBoxIsScrolled,
            bottom: TabBar(
              unselectedLabelColor: Colors.white,
              labelColor: Colors.white,
              tabs: <Widget>[
                Tab(
                  text: "Tab A",
                ),
                Tab(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("Tab B"),
                      Padding(
                        padding: EdgeInsets.only(left: 15),
                      ),
                    ],
                  ),
                ),
              ],
              controller: _tabController,
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
          ),
        ];
      },
    ));
  }
}

class TabA extends StatefulWidget {
  final ScrollController scrollController;

  TabA(this.scrollController);

  @override
  State<StatefulWidget> createState() => _TabAState();
}

class _TabAState extends State<TabA> with SingleTickerProviderStateMixin {
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      new GlobalKey<RefreshIndicatorState>();

  bool isLoading = false;
  int page = 1;
  AnimationController controller;
  Animation<Offset> offset;

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

    widget.scrollController.addListener(_scrollListener);
    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 2.0))
        .animate(controller);
  }

  final data = [
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
    'T 0',
    'T 1',
    'T 2',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: SlideTransition(
            position: offset,
            child: FloatingActionButton(
                elevation: 0.0,
                child: Icon(Icons.add, color: Colors.white),
                onPressed: () {})),
        body: RefreshIndicator(
            key: _refreshIndicatorKey,
            onRefresh: _refresh,
            child: _showData()));
  }

  void _scrollListener() async {
    if (widget.scrollController.position.pixels ==
        widget.scrollController.position.maxScrollExtent) {
      // display loading on bottom of listView
    }
    if (widget.scrollController.position.userScrollDirection ==
        ScrollDirection.reverse) {
      setState(() {
        controller.forward();
      });
    }
    if (widget.scrollController.position.userScrollDirection ==
        ScrollDirection.forward) {
      setState(() {
        controller.reverse();
      });
    }
  }

  Widget _showData() {
    return Stack(
      children: <Widget>[
        _showListView(),
        // Align(
        //   child: Row(
        //       mainAxisAlignment: MainAxisAlignment.center,
        //       children: <Widget>[
        //         Padding(
        //             padding: EdgeInsets.only(bottom: 15),
        //             child: Text("loading .....",
        //                 style: TextStyle(
        //                   color: const Color(0xff000066),
        //                   fontSize: 15,
        //                 ))),
        //         SizedBox(
        //           width: 12,
        //         ),
        //       ]),
        //   alignment: FractionalOffset.bottomCenter,
        // )
      ],
    );
  }

  Widget _showListView() {
    return ListView.builder(
        controller: widget.scrollController,
        itemCount: data.length,
        itemBuilder: (context, index) {
          return Text(data[index]);
        });
  }

  Future<void> _refresh() {
    // return data;
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当父级的高度为100%时,隐藏的溢出与嵌套的溢出滚动不起作用

滚动条溢出时自动隐藏不起作用

溢出-x:隐藏不起作用,而是在滚动时在右侧添加填充

在向下滚动时隐藏菜单,然后在向上滚动达到0时显示菜单[javascript]对我不起作用

UIScrollViewKeyboardDismissModeOnDrag当无法滚动时不起作用

向下滚动时动画不起作用

滚动时CollapsingToolbarLayout不起作用(崩溃)

单击时锚滚动不起作用

隐藏元素时show()不起作用

隐藏滚动条在 Mozilla Firefox 中不起作用

滚动动画在向上滚动时不起作用

溢出:隐藏绝对定位的 div 时隐藏不起作用

我正在制作在滚动超过 100 像素时隐藏导航栏但不起作用的导航栏

当 getElementsByClassName 时,在滚动时旋转 javascript 不起作用

使用 cssgrid 时,pageYOffset 在滚动时不起作用

网格项与末尾对齐时滚动不起作用

使用 puppeteer 抓取谷歌地图时滚动不起作用

使用动画时,角度平滑滚动不起作用

当滚动到Alpha视图后面时,scrollTo不起作用

快速滚动列表项时,setOnScrollListener不起作用

为什么在滚动时onTouchEvent内的smoothScrollTo不起作用?

滚动父div时位置固定不起作用

键盘开启时,Android中的滚动形式不起作用

Jquery-offsetLeft 在向右滚动时不起作用

框影过渡在滚动时不起作用

滚动行为:平滑,删除元素时不起作用

使用滚轮时自动滚动不起作用

显示时如何隐藏元素:none 不起作用

输入隐藏时input.select()不起作用