Flutter在展开时如何隐藏Silver AppBar的标题

6
我在我的Flutter应用程序中实现了带有背景图片的银色应用栏。我希望在银色应用栏处于展开模式时将标题隐藏,仅在折叠时显示标题。我该如何实现这种行为?
SliverAppBar(
            expandedHeight: 250.0,
            floating: false,
            pinned: true,
            title: Text("Coporate News"),
            elevation: 8,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text(""),
                background: Stack(
                  children: [
                    Container(
                      height: 400,
                      child: Image.network(
                        news['url'],
                        fit: BoxFit.cover,
                      ),
                    ),        
     .......

I only wants to display it here And I wants to hide it from here

2个回答

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

class InvisibleExpandedHeader extends StatefulWidget {
  final Widget child;
  const InvisibleExpandedHeader({
    Key? key,
    required this.child,
  }) : super(key: key);
  @override
  _InvisibleExpandedHeaderState createState() {
    return _InvisibleExpandedHeaderState();
  }
}
class _InvisibleExpandedHeaderState extends State<InvisibleExpandedHeader> {

  ScrollPosition? _position;
  bool? _visible;
  
  @override
  void dispose() {
    _removeListener();
    super.dispose();
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _removeListener();
    _addListener();
  }
  void _addListener() {
    _position = Scrollable.of(context)?.position;
    _position?.addListener(_positionListener);
    _positionListener();
  }
  void _removeListener() {
    _position?.removeListener(_positionListener);
  }
  void _positionListener() {
    final FlexibleSpaceBarSettings? settings =
      context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
    bool visible = settings == null || settings.currentExtent <= settings.minExtent;
    if (_visible != visible) {
      setState(() {
        _visible = visible;
      });
    }
  }
  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: _visible?? false,
      child: widget.child,
    );
  }
}

并将此InvisibleExpanded小部件用于Sliver AppBar内部

return SliverAppBar(
    
      flexibleSpace: FlexibleSpaceBar(
        titlePadding: const EdgeInsets.all(20),
        background: InteractiveViewer(
            child: Image.network(examImagePlaceHolder,
                fit: BoxFit.cover, width: double.infinity)),
        title: InvisibleExpandedHeader(
          child: Text(
            'Global Iq Test for all students in the world',
            style: primaryTitle,
          ),
        ),
      ),
    );

-3
你需要将 pinned 属性设置为 false:
SliverAppBar(
            expandedHeight: 250.0,
            floating: false,
            pinned: false,
            title: Text("Coporate News"),
            elevation: 8,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text(""),
                background: Stack(
                  children: [
                    Container(
                      height: 400,
                      child: Image.network(
                        news['url'],
                        fit: BoxFit.cover,
                      ),
                    ),        
     .......

4
这并没有帮助。 - Ahmad Khan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接