美文网首页
flutter-列表滚动按钮

flutter-列表滚动按钮

作者: ChaosHeart | 来源:发表于2022-10-05 10:10 被阅读0次
import 'package:flutter/material.dart';
import 'package:imes_base_plugins/common/layout.dart';

///上下滚动按钮
class UpDownScrollWidget extends StatefulWidget {
  final ScrollController sc; //上下滚动控制器

  const UpDownScrollWidget({Key key, @required this.sc}) : super(key: key);

  @override
  State<UpDownScrollWidget> createState() => _UpDownScrollWidgetState();
}

///Chaos20200826
class _UpDownScrollWidgetState extends State<UpDownScrollWidget> {
  //上下滚动
  bool _upDown = false;

  ///build
  @override
  void initState() {
    super.initState();
    _listenerSc(_upDown, widget.sc);
  }

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

  ///build
  @override
  Widget build(BuildContext context) {
    return _rollingWidget(_upDown, widget.sc);
  }

  ///上下滚动 按钮
  _rollingWidget(bool upDown, ScrollController sc) {
    return InkWell(
      onTap: () {
        upDown ? sc.jumpTo(0) : sc.jumpTo(sc.position.maxScrollExtent);
      },
      child: ClipRRect(
        borderRadius: BorderRadius.circular(w(25)),
        child: Image.asset(
          upDown ? "images/iqc_sampling_sys/icon-top.png" : "images/iqc_sampling_sys/icon-down.png",
          width: w(50),
          height: w(50),
          fit: BoxFit.fill,
        ),
      ),
    );
  }

  ///上下滚动 监听滚动
  _listenerSc(bool upDown, ScrollController sc) {
    sc.addListener(() {
      // logs("打印当前滚动位置:${sc.offset}");
      //判断显示上下那个按钮
      if (sc.offset < sc.position.maxScrollExtent / 2) {
        _upDown = false;
      } else {
        _upDown = true;
      }
      setState(() {});
    });
  }
}

相关文章

  • flutter-列表滚动按钮

  • css滚动继承问题

    css中有一类滚动继承问题。假如现在有一个淘宝商品页,商品列表可以滚动,列表上面有一个筛选按钮,点击可弹出一个筛选...

  • 列表按设定条数定时滚动

    /* 列表定时滚动效果(javascript) @listId :滚动列表ID @listTagName :滚动元...

  • Flutter-按钮

    在 Flutter 里有很多的 Button,包括了:RaisedButton、FloatingActionBut...

  • 项目评估模块

    1、滚动条控制的区域 不应该是整个页面 ,而是控制的列表。 2、列表的排序有问题 1、“新建初评/报价” 这个按钮...

  • 十、Vue如何使用better-scroll插件

    在我们移动项目开发中,经常会处理滚动列表的功能,有的是横向滚动列表,有的是纵向滚动列表。我们在实现这类滚动效果的时...

  • Flutter-滚动监听

  • React Native - 08 - 响应点击

    用户主要通过触摸与移动应用进行交互。他们可以使用手势组合,例如点击按钮,滚动列表或缩放地图。 React Nati...

  • UGUI 滚动列表

    UGUI 滚动列表 首先需要搭建我们自己的滚动列表UI场景。    使用VerticalLayoutGroup进行...

  • iOS 实现悬浮按钮上下移动

    当scrollView向下滚动时,按钮会向下移动消失,等scrollview向上滚动时,按钮则又会出现。

网友评论

      本文标题:flutter-列表滚动按钮

      本文链接:https://www.haomeiwen.com/subject/gctpartx.html