dart 如何判断ListView.Builder中的最后一项是否已在Flutter中显示到屏幕上

0s7z1bwu  于 2023-07-31  发布在  Flutter
关注(0)|答案(2)|浏览(174)

全部
我想听听ListView.Builder()中滚动的声音,并在列表的最后一项被绘制/显示到用户屏幕上时得到通知。我想隐藏FloatingActionButton,这样用户就可以看到最后一个项目,而不会被FloatingActionButton隐藏/阻止
x1c 0d1x的数据

ListView.builder(
         itemCount: Data.channels.length,
         itemBuilder: (c, index) {
         Channel item = Data.channels[index];
         return Container(
            child:Text(item.name,
     );
},

字符串

r9f1avp5

r9f1avp51#

您可以使用ScrollController跟踪滚动位置。

class DF extends StatefulWidget {
  const DF({super.key});

  @override
  State<DF> createState() => _DFState();
}

class _DFState extends State<DF> {
  final _controller = ScrollController();
  ValueNotifier<bool> isLast = ValueNotifier(false);

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      // you can try _controller.position.atEdge
      if (_controller.position.pixels >= _controller.position.maxScrollExtent - 100) {
        //100 is item height
        isLast.value = true;
      } else {
        isLast.value = false;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: ValueListenableBuilder(
        valueListenable: isLast,
        builder: (context, value, child) {
          return Visibility(
            visible: value,
            child: FloatingActionButton(
              onPressed: () {},
            ),
          );
        },
      ),
      body: ListView.builder(
        controller: _controller,
        itemCount: 15,
        itemBuilder: (context, index) => Container(
          height: 100,
          color: Colors.red,
          child: Text('$index'),
        ),
      ),
    );
  }
}

字符串
也可以检查visibility_detector

5lhxktic

5lhxktic2#

你可以通过这个代码来实现

class _MyHomePageState extends State<MyHomePage> {
  ScrollController scrollController = ScrollController();
  bool _showFloating = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      bottomNavigationBar: Container(height: 100,color: Colors.cyan,width: double.infinity,),
      body: NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification scrollInfo) {
            if (scrollInfo.metrics.pixels ==
                scrollInfo.metrics.maxScrollExtent) {
              setState(() {
                _showFloating = false;
              });
            } else {
              setState(() {
                _showFloating = true;
              });
            }
            return false;
          },
          child: ListView.separated(
              controller: scrollController,
              itemBuilder: (c, i) {
                return Container(
                  width: double.infinity,
                  height: 100,
                  color: Colors.red,
                );
              },
              separatorBuilder: (c, i) {
                return Divider();
              },
              itemCount: 10)),
      floatingActionButton:
          _showFloating ? FloatingActionButton(onPressed: () {}) : SizedBox(),
    );
  }
}

字符串

相关问题