Flutter如何检查Sliver AppBar是否展开或折叠？

Question

Flutter如何检查Sliver AppBar是否展开或折叠？

flutterflutter-sliver

41

我在Flutter中使用了一个带有背景小部件的SliverAppBar。

问题是，当它展开时，标题和图标（前导和操作）应该是白色才能正确显示，而当它折叠时，它们应该变为黑色。

有什么想法可以得到一个bool吗？或者其他解决这个问题的方法。

谢谢。

class SliverExample extends StatefulWidget {
  final Widget backgroundWidget;
  final Widget bodyWidgets;

  SliverExample({
    this.backgroundWidget,
    this.body,
  });
  @override
  _SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

  // I need something like this
  // To determine if SliverAppBar is expanded or not.
  bool isAppBarExpanded = false;

  @override
  Widget build(BuildContext context) {

    // To change the item's color accordingly
    // To be used in multiple places in code
    Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

    // In my case PrimaryColor is white,
    // and the background widget is dark

    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            leading: BackButton(
              color: itemColor, // Here
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: itemColor, // Here
                ),
                onPressed: () {},
              ),
            ],
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'title',
                style: TextStyle(
                  fontSize: 18.0,
                  color: itemColor, // Here
                ),
              ),
              // Not affecting the question.              
              background: widget.backgroundWidget,
            ),
          ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.body),
        ],
      ),
    );
  }
}

- Sina Seirafi

请添加您的代码！ - anmol.majhail

@anmol.majhail 谢谢你提醒我。 - Sina Seirafi

https://dev59.com/fFUL5IYBdhLWcg3wDkdT#51927031 - anmol.majhail

5个回答

16

您需要使用ScrollController来实现所需的效果。

尝试这段代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SliverExample(
        bodyWidgets: Text(
            'Hello Body gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg'),
        backgroundWidget: Text('Hello Background'),
      ),
    );
  }
}

class SliverExample extends StatefulWidget {
  final Widget backgroundWidget;
  final Widget bodyWidgets;

  SliverExample({
    this.backgroundWidget,
    this.bodyWidgets,
  });

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

class _SliverExampleState extends State<SliverExample> {

  ScrollController _scrollController;
  Color _theme ;

  @override
  void initState() {
    super.initState();
    _theme = Colors.black;

    _scrollController = ScrollController()
      ..addListener(
        () => _isAppBarExpanded ?
            _theme != Colors.white ?
        setState(
          () {
            _theme = Colors.white;
            print(
                'setState is called');
          },
        ):{}
            : _theme != Colors.black ?
        setState((){
          print(
              'setState is called');
          _theme = Colors.black;
        }):{},

      );
  }

  bool get _isAppBarExpanded {
    return _scrollController.hasClients &&
        _scrollController.offset > (200 - kToolbarHeight);
  }

  @override
  Widget build(BuildContext context) {
    // To change the item's color accordingly
    // To be used in multiple places in code
    //Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

    // In my case PrimaryColor is white,
    // and the background widget is dark

    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            leading: BackButton(
              color: _theme, // Here
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: _theme, // Here
                ),
                onPressed: () {},
              ),
            ],
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'title',
                style: TextStyle(
                  fontSize: 18.0,
                  color: _theme, // Here
                ),
              ),
              // Not affecting the question.
              background: widget.backgroundWidget,
            ),
          ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.bodyWidgets),
        ],
      ),
    );
  }
}

如果你不熟悉 ? : 表达式的用法，可以使用以下内容

_scrollController = ScrollController()
      ..addListener(
          (){
            if(_isAppBarExpanded){
              if(_theme != Colors.white){
                setState(() {
                  _theme = Colors.white;
                  print('setState is called with white');
                });
              }
            }else{
              if(_theme != Colors.black){
                setState(() {
                  _theme = Colors.black;
                  print('setState is called with black');
                });
              }
            }
          }

- Saed Nabil

这个解决方案让我的ListView每次滚动时都会刷新。 - Zeffry Reynando

@ZeffryReynando 感谢您的指出，您实际上可以使用 if else 来检查是否需要重新构建并相应地调用 setState。我编辑了我的答案以反映这一点，但我仍然使用了 ? : 符号，因为我习惯于使用它，希望这对您有所帮助。 - Saed Nabil

我有点困惑，你用 ? : 符号来表示 if else，特别是 _isAppBarExpanded ? _theme != Colors.white ? 这一段。你能否用传统的 if else 来解释一下？ - Zeffry Reynando

@ZeffryReynando，请查看使用传统if else语句的添加部分。 - Saed Nabil

12

使用具有innerBoxIsScrolled布尔标志的NestedScrollView将是您问题的一个不错的解决方案，类似于以下内容

NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          print("INNEER SCROLLED VI=======>$innerBoxIsScrolled");
          return <Widget>[
            SliverAppBar(), 
            ]},
body:Center(child:Text("Test IT")),

);

- Uzair Leo

这应该是被接受的答案。另一个回答只关注flexibleSpace内部的变量height，但这个答案真正指出了如何检测appbar是否展开或折叠，并且可以在flexibleSpace之外访问它，而不需要编写任何额外的代码。 - Taufik Nur Rahmanda

你们好，实际上NestedScrollView非常方便，去阅读它的文档吧，你可以使用它来处理更多事件并避免样板代码。 - Uzair Leo

6

您可以使用SliverLayoutBuilder获取当前的SliverConstraints并读取其值，以便轻松检测滚动量。这与LayoutBuilder非常相似，只是它在sliver世界中运行。

如果constraints.scrollOffset > 0，那么这意味着用户至少滚动了一点。使用该方法，如果您想在滚动时进行一些动画/过渡，也很容易 - 只需获取当前的scrollOffset并根据此生成您的动画帧。

例如，此SliverAppBar将在用户滚动时更改颜色：

  SliverLayoutBuilder(
    builder: (BuildContext context, constraints) {
      final scrolled = constraints.scrollOffset > 0;
      return SliverAppBar(
        title: Text('Sliver App Bar'),
        backgroundColor: scrolled ? Colors.blue : Colors.red,
        pinned: true,
      );
    },
  )

- WSBT

3

这对我有用

检查这行代码

title: Text(title,style: TextStyle(color: innerBoxIsScrolled? Colors.black:Colors.white),),

把你的标题改成

title: innerBoxIsScrolled? Text("hello world") : Text("Good Morning",)

class _ProductsState extends State<Products> {
  String image;
  String title;

  _ProductsState(this.image,this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
          return <Widget>[
            SliverOverlapAbsorber(
              handle:
              NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                leading: InkWell(
                  onTap: (){

                  },
                  child: Icon(
                    Icons.arrow_back_ios,
                    color: Colors.black,
                  ),
                ),
                backgroundColor: Colors.white,
                pinned: true,
                //floating: true,
                stretch: true,
                expandedHeight: 300.0,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text(title,style: TextStyle(color: innerBoxIsScrolled? Colors.black: Colors.white),),
                  background: CachedNetworkImage(imageUrl:image,fit: BoxFit.fitWidth,alignment: Alignment.topCenter,
                    placeholder: (context, url) => const CircularProgressIndicator(color: Colors.black,),
                    errorWidget: (context, url, error) => const Icon(Icons.error),),
                ),
              ),
            ),
          ];
        },
        body: Builder(
            builder:(BuildContext context) {
              return CustomScrollView(
                slivers: [
                  SliverOverlapInjector(
                    // This is the flip side of the SliverOverlapAbsorber above.
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context),
                  ),
                  SliverToBoxAdapter(
                    child: Container(
                      height: 90,
                      color: Colors.black,
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Container(
                      height: 200,
                      color: Colors.red,
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        height: 200,
                        color: Colors.green,
                      ),
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Container(
                      height: 200,
                      color: Colors.blue,
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Container(
                      height: 200,
                      color: Colors.red,
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Container(
                      height: 200,
                      color: Colors.blue,
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Container(
                      height: 200,
                      color: Colors.red,
                    ),
                  ),
                ],
              );
            }
        ),
      ),
    );
  }
}

- Dylan Karimagoko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jack Sun · Accepted Answer

您可以使用LayoutBuilder获取sliver AppBar的最大高度。当biggest.height = MediaQuery.of(context).padding.top + kToolbarHeight时，这实际上表示sliver appbar已折叠。

这是一个完整的示例，在此示例中，MediaQuery.of(context).padding.top + kToolbarHeight = 80.0：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var top = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                // print('constraints=' + constraints.toString());
                top = constraints.biggest.height;
                return FlexibleSpaceBar(
                    centerTitle: true,
                    title: AnimatedOpacity(
                        duration: Duration(milliseconds: 300),
                        //opacity: top == MediaQuery.of(context).padding.top + kToolbarHeight ? 1.0 : 0.0,
                        opacity: 1.0,
                        child: Text(
                          top.toString(),
                          style: TextStyle(fontSize: 12.0),
                        )),
                    background: Image.network(
                      "https://images.unsplash.com/photo-1542601098-3adb3baeb1ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5bb9a9747954cdd6eabe54e3688a407e&auto=format&fit=crop&w=500&q=60",
                      fit: BoxFit.cover,
                    ));
              })),
        ];
      },body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context,index){
          return Text("List Item: " + index.toString());
        },
      ),
    ));
  }
}

最终结果: