先看下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(完全不透明)。注意这里简单的实现了透明度随滚动距离线性变化,你可以根据需要调整计算方式以达到想要的效果。
请注意,上面的代码只是一个基础示例,实际应用中可能需要调整参数或样式以适应具体的设计需求。