Flutter滚动时无法正常隐藏AppBar标题问题求助

问题核心在于默认情况下，SliverAppBar只会对系统默认的操作按钮（比如IconButton）应用滚动动画，自定义的Text组件不会自动同步。我们可以通过监听滚动偏移，动态控制标题和图标的透明度来解决：

修改步骤： #

1. 将HomeScreen改为StatefulWidget，添加滚动控制器并监听滚动事件
2. 根据滚动偏移计算透明度值，同步应用到标题文本和搜索图标
3. 组件销毁时移除监听，避免内存泄漏

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:vet_mobile/screens/chat.dart';
import 'package:vet_mobile/screens/logot.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final ScrollController _scrollController = ScrollController();
  double _opacity = 1.0;
  // 定义AppBar基础高度（不含TabBar）
  final double _appBarBaseHeight = kToolbarHeight;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    // 滚动偏移超过AppBar基础高度时，透明度从1线性降到0
    double scrollOffset = _scrollController.offset;
    setState(() {
      _opacity = scrollOffset <= _appBarBaseHeight 
          ? 1.0 - (scrollOffset / _appBarBaseHeight) 
          : 0.0;
    });
  }

  @override
  void dispose() {
    _scrollController.removeListener(_onScroll);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final textColor = Theme.of(context).textTheme.bodyLarge!.color;
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        body: NestedScrollView(
          controller: _scrollController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'WhatsApp',
                      style: TextStyle(
                        color: textColor?.withOpacity(_opacity),
                      ),
                    ),
                    IconButton(
                      onPressed: () {},
                      icon: Icon(
                        Icons.search,
                        color: textColor?.withOpacity(_opacity),
                      ),
                    ),
                  ],
                ),
                pinned: true,
                floating: true,
                elevation: 5,
                bottom: TabBar(
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicatorWeight: 4,
                  indicatorColor: textColor,
                  labelStyle: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
                  labelColor: textColor,
                  unselectedLabelColor: Theme.of(context).textTheme.bodySmall!.color,
                  dividerColor: Colors.transparent,
                  tabs: const [
                    Tab(text: 'CHATS'),
                    Tab(text: 'STATUS'),
                    Tab(text: 'CALLS'),
                  ],
                ),
              ),
            ];
          },
          body: const TabBarView(
            children: [
              Center(child: LogoutScreen()),
              Center(child: ChatScreen()),
              Center(child: Text('Patient')),
            ],
          ),
        ),
      ),
    );
  }
}

关键说明： #

• 通过ScrollController监听滚动偏移，透明度变化逻辑可根据需求调整（比如修改触发变化的滚动阈值）
• 给标题文本和搜索图标统一设置withOpacity(_opacity)，实现同步的透明度动画
• 在dispose方法中清理控制器和监听，避免内存泄漏

内容的提问来源于stack exchange，提问作者Sanket hn