我使用的是一个SliverAppBar英寸的Flutter 翼,带有一个背景小工具.

问题是,当它是expanded时,标题和图标( bootstrap 和动作)应该是white才能正确看到,当它是collapsed时,它们应该更改为black.

你有什么办法让我拿到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),
        ],
      ),
    );
  }
}

推荐答案

您可以使用LayoutBuilder来获得条形AppBar的最大高度.当bigster.high=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());
        },
      ),
    ));
  }
}

最终结果:

enter image description here

Flutter相关问答推荐

当第二页在单独的小工具中使用Navigator.pop时,Navigator.push不起作用

ListTile未正确显示在flutter中

Build.gradle专线:2个Flutter Flutter

Flutter BLoC et workmanager:如何创建独特的仓库初始化模式?

Firebase动态链接已弃用,不应在新项目中使用.Flutter 替代方案

我想在Flutter中画一个箭头,但我似乎无法填满空间

我怎样才能go 掉这个底部导航栏上的白色背景

Flutter 渲染HTML和数学(LaTeX和Katex)

Flutter为什么不;没有ListView.iterable()构造函数?

构建方法中的性能声明小部件

Flutter http 请求获取 null

如何正确地将 PageView 设置为 AppBar 的标题?

有什么办法可以消除Flutter 中的传递依赖?

我无法从 Cloud firestore 访问文档字段并在 statefulwidget 类中显示它

无效的 depfile: C:\xxx\xxx\Flutter\project_name\.dart_tool\flutter_build\df4b308df1ee4bce22c56c71751554d1\kernel_snapshot.d 无效

我几乎每次都将 Stateless Widget 与 BLoC 一起使用.我错了吗?

Flutter 活跃的互联网连接

type '_InternalLinkedHashMap' 不是使用 http 包的'String' 类型的子类型

参数类型MaterialPageRoute不能分配给参数类型String

用于空值 FirebaseFirestore 的空值判断运算符