flutter项目,如何实现滚动页面,慢慢显示appBar的title

202 阅读1分钟

先看下demo代码,然后再介绍

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
    @override Widget build(BuildContext context) { 
        return MaterialApp( 
            title: 'Flutter Demo', 
            theme: ThemeData( primarySwatch: Colors.blue, ), 
            home: MyHomePage(), 
        ); 
    } 
} 

// 创建一个有状态的页面
class MyHomePage extends StatefulWidget { 
    @override _MyHomePageState createState() => _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> with SingleChildMixin { 
    double _opacity = 0.0;  // 透明度变量
    ScrollController _scrollController = ScrollController(); // 控制滚动
    
    @override 
    void initState() { 
        super.initState(); 
        _scrollController.addListener(() { // 监听滚动,记得下面要清除滚动
            setState(() { // 计算透明度值 
                double opacity = (_scrollController.offset.dy / 100).clamp(0.0, 1.0); 
                _opacity = opacity; 
            }); 
        }); 
    } 
    
    @override 
    void dispose() { 
        _scrollController.dispose(); 
        super.dispose(); 
    } 
    
    @override 
    Widget build(BuildContext context) { 
        return Scaffold( 
            appBar: AppBar(
                title: Opacity(
                    opacity: _opacity,
                    child: Text('这是标题'),
                ),
            ), 
            body: SingleChildScrollView( 
                controller: _scrollController, 
                child: Column( 
                    children: List.generate(100, (index) { 
                        return Container( 
                            height: 100, 
                            color: index % 2 == 0 ? Colors.grey : Colors.white, 
                            child: Center(
                                child: Text('Item $index')
                            ), 
                        ); 
                    }), 
                ), 
            ), 
); } }

这段代码中,_opacity变量用来存储标题的透明度值,初始设置为0(完全透明)。当用户开始向下滚动时,_scrollController会监听到滚动事件并更新_opacity值,使其从0逐渐增加到1(完全不透明)。注意这里简单的实现了透明度随滚动距离线性变化,你可以根据需要调整计算方式以达到想要的效果。

请注意,上面的代码只是一个基础示例,实际应用中可能需要调整参数或样式以适应具体的设计需求。