我第一次在我的设备上使用移动的Spotify应用程序,我注意到播放/暂停按钮是如何滚动的网站,但顶部.现在我问自己:我如何在Flutter中实现这个功能?我怎样才能使应用程序栏从透明变成不透明滚动?第一节第一节第一节第一节第一次
wmomyfyw1#
我有这个特殊的小工具我建立它对我自己,希望这能帮助你注:给予此小部件ScrollController连接到列表视图
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:get/get.dart'; import 'package:tvri/PORTRAIT/themes/my_themes.dart'; class SliverBar extends StatefulWidget with PreferredSizeWidget { const SliverBar({ super.key, required this.scrollController, required this.title, this.leading, this.actionButton, this.centerTitle = true, this.titleSpacing = 0.0, this.withLeading = true, }); final ScrollController scrollController; final dynamic title; final Widget? leading; final List<Widget>? actionButton; final bool centerTitle; final double titleSpacing; final bool withLeading; @override State<SliverBar> createState() => _SliverBarState(); @override Size get preferredSize => const Size.fromHeight(60); } class _SliverBarState extends State<SliverBar> { double visibleCount = 0; @override void initState() { super.initState(); widget.scrollController.addListener(scrollListener); } scrollListener() { double maxHeight = Get.statusBarHeight; double offset = widget.scrollController.offset; if (offset < maxHeight) { setState(() { visibleCount = offset / maxHeight; }); } else if (offset > maxHeight && visibleCount < 1.0) { setState(() { visibleCount = 1.0; }); } } @override Widget build(BuildContext context) { return AppBar( systemOverlayStyle: const SystemUiOverlayStyle( statusBarColor: Colors.transparent, // <-- SEE HERE statusBarIconBrightness: Brightness.light, //<-- For Android SEE HERE (dark icons) statusBarBrightness: Brightness.light, //<-- For iOS SEE HERE (dark icons) ), automaticallyImplyLeading: false, backgroundColor: MyThemes.colorBlue.withOpacity(visibleCount), elevation: 0, centerTitle: widget.centerTitle, titleSpacing: widget.titleSpacing, leading: widget.withLeading ? widget.leading ?? IconButton( onPressed: () { Get.back(); }, icon: const Icon(Icons.chevron_left, size: 24), ) : null, title: widget.title is String ? Text( widget.title, style: const TextStyle( color: MyThemes.colorWhite, fontSize: 16, ), ) : widget.title, actions: widget.actionButton, ); } }
1条答案
按热度按时间wmomyfyw1#
我有这个特殊的小工具我建立它对我自己,希望这能帮助你
注:给予此小部件ScrollController连接到列表视图