0

如 gif 所示,Sliver 并不总是正确地从 BB 和 CC 选项卡消失/出现。 在此处输入图像描述


条子的代码是:
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: DefaultTabController(
          length: 3,
          child: NestedScrollView(
            floatHeaderSlivers: true,
            body: TabBarView(children: [
              AA(),
              BB(),
              CC(),
            ]),
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverAppBar(
                  floating: true,
                  pinned: false,
                  //snap: true,
                  leading: IconButton(
                    icon: Icon(Icons.settings),
                    onPressed: () {},
                  ),
                  title: Text('SLIVER HEADER'),
                  elevation: 0.0,
                ),
                SliverAppBar(
                  toolbarHeight: 0.0,
                  primary: false,
                  pinned: true,
                  bottom: TabBar(
                    tabs: [
                      Tab(
                        text: 'AA',
                      ),
                      Tab(
                        text: 'BB',
                      ),
                      Tab(
                        text: 'CC',
                      ),
                    ],
                  ),
                )
              ];
            },
          ),
        ),
      ),
    );
  }
}


BB 和 CC 的代码是

class BB extends StatefulWidget {
  @override
  _BBState createState() => _BBState();
}

class _BBState extends State<BB> with AutomaticKeepAliveClientMixin<BB> {
  final HideNavbar hiding = HideNavbar();
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Stack(
      alignment: Alignment.bottomRight,
      children: [
        ListView.builder(
        
            controller: hiding.controller,
            itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Card(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('$index'),
                    ),
                  ),
                )),
        ValueListenableBuilder(
          valueListenable: hiding.visible,
          builder: (BuildContext context, value, Widget child) => Padding(
            padding: const EdgeInsets.only(bottom: 60.0),
            child: Material(
              elevation: 2.0,
              borderRadius: BorderRadius.circular(30),
              color: Colors.blue,
              child: InkWell(
                splashColor: Colors.white.withOpacity(0.4),
                customBorder: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
                onTap: () {},
                child: AnimatedContainer(
                    duration: Duration(milliseconds: 300),
                    height: 50,
                    width: value ? 50 : 120,
                    decoration:
                        BoxDecoration(borderRadius: BorderRadius.circular(30)),
                    child: value
                        ? Center(child: Icon(Icons.add, color: Colors.white))
                        : Center(
                            child: Text(
                            'Create BBBB',
                            overflow: TextOverflow.fade,
                            maxLines: 1,
                            style:
                                TextStyle(color: Colors.white, fontSize: 16.0),
                          ))),
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}


隐藏浮动操作按钮的代码是:


class HideNavbar {
  final ScrollController controller = ScrollController();
  final ValueNotifier<bool> visible = ValueNotifier<bool>(true);

  HideNavbar() {
    visible.value = false;
    controller.addListener(
      () {
        if (controller.position.userScrollDirection ==
            ScrollDirection.reverse) {
          if (controller.offset > 100) {
            if (!visible.value) {
              visible.value = true;
            }
          }
        }

        if (controller.position.userScrollDirection ==
            ScrollDirection.forward) {
          if (controller.offset < 500) {
            if (visible.value) {
              visible.value = false;
            }
          }
        }
      },
    );
  }

  void dispose() {
    controller.dispose();
    visible.dispose();
  }
}


据我所知,当不使用 HideNavBar 类并消除 FAB 对滚动的影响时,一切正常。
如果我将 hidden.controller 用于 NestedScrollView 而不是 BB 和 CC 类,则 Sliver 可以正常工作。但是问题是---如果我只滚动 BB 列表,发生在 BB 的 FAB 上的相同效果也会发生在 CC 的 FAB 上。
任何进一步进行的建议或替代出路
4

0 回答 0