Flutter实现滚动时元素置顶及AppBar从透明转不透明的方法

核心思路是通过监听滚动偏移量，动态调整按钮位置：当滚动距离超过按钮初始所在位置时，将其固定在顶部；未超过时，让按钮随页面同步滚动。

具体实现步骤：

• 定义ScrollController监听滚动事件
• 用Stack布局叠加列表与播放按钮
• 根据滚动偏移量计算按钮的top值，完成位置切换

代码示例：

import 'package:flutter/material.dart';

class StickyPlayerButtonPage extends StatefulWidget {
  const StickyPlayerButtonPage({super.key});

  @override
  State<StickyPlayerButtonPage> createState() => _StickyPlayerButtonPageState();
}

class _StickyPlayerButtonPageState extends State<StickyPlayerButtonPage> {
  final ScrollController _scrollController = ScrollController();
  double _buttonTop = 300; // 按钮初始位置（可按需调整）
  final double _stickyTop = 0; // 固定到顶部时的位置
  final double _buttonHeight = 60; // 按钮高度

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

  void _onScroll() {
    final scrollOffset = _scrollController.offset;
    setState(() {
      // 计算按钮应处位置：滚动偏移超过初始位置与按钮高度差值时，固定在顶部
      final calculatedTop = _buttonTop - scrollOffset;
      _buttonTop = calculatedTop <= _stickyTop ? _stickyTop : calculatedTop;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          ListView.builder(
            controller: _scrollController,
            itemCount: 50,
            itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
          ),
          Positioned(
            left: 20,
            right: 20,
            top: _buttonTop,
            height: _buttonHeight,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.greenAccent,
                borderRadius: BorderRadius.circular(30),
              ),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.play_arrow),
                  SizedBox(width: 10),
                  Text('播放/暂停'),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

核心思路是监听滚动偏移量，动态修改AppBar背景色的透明度：滚动距离从0增加到设定阈值时，透明度从0渐变到1；超过阈值后保持完全不透明。

提供两种实现方式：

方式1：结合SliverAppBar与NestedScrollView #

import 'package:flutter/material.dart';

class TransparentToOpaqueAppBarPage extends StatefulWidget {
  const TransparentToOpaqueAppBarPage({super.key});

  @override
  State<TransparentToOpaqueAppBarPage> createState() => _TransparentToOpaqueAppBarPageState();
}

class _TransparentToOpaqueAppBarPageState extends State<TransparentToOpaqueAppBarPage> {
  final ScrollController _scrollController = ScrollController();
  double _appBarOpacity = 0.0;
  final double _opacityThreshold = 200.0; // 滚动到该距离时完全不透明

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

  void _updateAppBarOpacity() {
    final scrollOffset = _scrollController.offset;
    setState(() {
      // 线性计算透明度，超出阈值后固定为1
      _appBarOpacity = (scrollOffset / _opacityThreshold).clamp(0.0, 1.0);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            expandedHeight: 200,
            floating: false,
            pinned: true,
            backgroundColor: Colors.blue.withOpacity(_appBarOpacity),
            flexibleSpace: const FlexibleSpaceBar(title: Text('动态透明度AppBar')),
          ),
        ],
        body: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
        ),
      ),
    );
  }
}

方式2：自定义AppBar配合普通ListView #

若无需Sliver布局，可直接自定义PreferredSizeWidget作为AppBar：

import 'package:flutter/material.dart';

class CustomTransparentAppBarPage extends StatefulWidget {
  const CustomTransparentAppBarPage({super.key});

  @override
  State<CustomTransparentAppBarPage> createState() => _CustomTransparentAppBarPageState();
}

class _CustomTransparentAppBarPageState extends State<CustomTransparentAppBarPage> {
  final ScrollController _scrollController = ScrollController();
  double _appBarOpacity = 0.0;
  final double _opacityThreshold = 200.0;

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

  void _updateOpacity() {
    final offset = _scrollController.offset;
    setState(() {
      _appBarOpacity = (offset / _opacityThreshold).clamp(0.0, 1.0);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Container(
          color: Colors.red.withOpacity(_appBarOpacity),
          child: const AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            title: Text('自定义透明AppBar'),
          ),
        ),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
      ),
    );
  }
}

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