flutter 我怎样才能使页面的一个随机元素在向下滚动时粘在顶部栏上?

ddrv8njm  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(140)

我第一次在我的设备上使用移动的Spotify应用程序,我注意到播放/暂停按钮是如何滚动的网站,但顶部.现在我问自己:我如何在Flutter中实现这个功能?
我怎样才能使应用程序栏从透明变成不透明滚动?
第一节第一节第一节第一节第一次

wmomyfyw

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,
    );
  }
}

相关问题