时间戳

首页 > 解决方案 > Flutter - 当列表向下滚动时显示一个浮动小部件

flutter - Flutter - 当列表向下滚动时显示一个浮动小部件

问题描述

当列表向上滚动时，有没有办法在屏幕顶部显示一个浮动小部件？

我的屏幕上有一个小部件（在可滚动小部件内），当我向上滚动时，我想将此小部件转换为粘性标题。并在我向下滚动时将其放回原处。

我曾尝试使用 Slivers 和 SliverAppBar（如果浮动设置为 true），但它的工作方式相反，它在向下滚动时显示，在其他情况下滚动时隐藏。

知道在哪里看吗？或任何例子？

这是我尝试过的。

CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),

    // I wan to stick this widget in the top, when I scroll up, initially it should be gone. 
    SliverAppBar(
      backgroundColor: Colors.blueAccent,
      floating: true,
      expandedHeight: 70,
      flexibleSpace: LayoutBuilder(
        builder: (context, constraints) {
          return FlexibleSpaceBar(
            title: Text("Sticky Header"),
          );
        },
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        return Text("Text $index");
      }, childCount: 50),
    ),
  ],
);

这就是我想要做的。

标签： flutterflutter-sliver

解决方案

只需将您的逻辑用于隐藏/显示，此示例适合您的问题：

    dependencies:
      flutter_scrolling_fab_animated: ^0.1.1+1

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_scrolling_fab_animated/flutter_scrolling_fab_animated.dart';

void main() {
  runApp(MyApp());
}

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

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<String> items = [];
  ScrollController _scrollController = ScrollController();
  double indicator = 10.0;
  bool onTop = true;

  @override
  void initState() {
    super.initState();
    addItemsToTheList();
  }

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

  void addItemsToTheList() {
    for (int count = 0; count < 100; count++) {
      items.add('Person ' + (count + 1).toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Scrolling Fab Animated Demo'),
        ),
        body: Container(
          child: new ListView.builder(
              controller: _scrollController,
              itemCount: items.length,
              itemBuilder: (BuildContext ctxt, int index) {
                return new Card(
                    child: ListTile(
                  title: Text(items[index]),
                ));
              }),
        ),
        floatingActionButton: ScrollingFabAnimated(
          icon: Icon(
            Icons.add,
            color: Colors.white,
          ),
          text: Text(
            'Add',
            style: TextStyle(color: Colors.white, fontSize: 16.0),
          ),
          onPress: () {},
          scrollController: _scrollController,
          animateIcon: true,
        ));
  }
}

推荐阅读