flutter - 自定义 float 操作按钮

Question

我正在使用 sliver 列表，我想同时使用 pub 中的 float 操作按钮和 sliding_up_panel，并具有以下行为:当我向下滚动列表时， float 操作按钮消失；当我向上滚动时，晶圆厂出现了。此外，当我向上滑动(打开)菜单时，fab 应该会消失。

如上所示， float 操作按钮都在滑动元素上，但我希望它位于滑动元素和滚动项目列表之间。

同样在上图中，问题是 float 按钮实际上是可见的，但我想在向上滑动滑动菜单时用漂亮的动画隐藏它。

我希望我的问题很清楚!!!

Answer 1

编辑请使用滚动 Controller

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SliverExample(
        bodyWidgets: Text('Hello Body'),
        backgroundWidget: Text('Hello Background'),
      ),
    );
  }
}

Widget listItem(Color color, String title) => Container(
  height: 100.0,
  color: color,
  child: Center(
    child: Text(
      "$title",
      textAlign: TextAlign.center,
      style: TextStyle(
          color: Colors.white,
          fontSize: 14.0,
          fontWeight: FontWeight.bold),
    ),
  ),
);

class SliverExample extends StatefulWidget {
  final Widget backgroundWidget;
  final Widget bodyWidgets;

  SliverExample({
    this.backgroundWidget,
    this.bodyWidgets,
  });
  @override
  _SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

  // I need something like this
  // To determine if SliverAppBar is expanded or not.
  ScrollController _scrollController;
  bool isAppBarExpanded = false;

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

    _scrollController = ScrollController()
      ..addListener(() => setState(() {
        print('Scroll view Listener is called offset ${_scrollController.offset}');
      }));
  }
  bool get _changecolor {
    return _scrollController.hasClients
        && _scrollController.offset > (200-kToolbarHeight);
  }

  bool get _hideFAB {
    return _scrollController.hasClients
        && _scrollController.offset > (200-kToolbarHeight);
  }

  @override
  Widget build(BuildContext context) {

    // To change the item's color accordingly
    // To be used in multiple places in code
    //Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

    // In my case PrimaryColor is white,
    // and the background widget is dark

    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverAppBar(

            pinned: true,
            leading: BackButton(
              color: _changecolor? Colors.white: Colors.black, // Here
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: _changecolor? Colors.white: Colors.black, // Here
                ),
                onPressed: () {},
              ),
            ],
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'title',
                style: TextStyle(
                  fontSize: 18.0,
                  color: _changecolor? Colors.white: Colors.black, // Here
                ),
              ),
              // Not affecting the question.
              background: widget.backgroundWidget,

            ),
          ),
        SliverList(
          ///Use SliverChildListDelegate and provide a list
          ///of widgets if the count is limited
          ///
          ///Lazy building of list
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              /// To convert this infinite list to a list with "n" no of items,
              /// uncomment the following line:
              /// if (index > n) return null;
              return listItem(Colors.grey, "Sliver List item: $index");
            },
            /// Set childCount to limit no.of items
            /// childCount: 100,
          ),
        ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.bodyWidgets),
        ],
      ),
      floatingActionButton: _hideFAB? Container() : FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add,),
      ),
    );
  }
}