Question

我有一个无限的ListView，如何向其中添加ScrollBar？我试图将ListView包装在ScrollBar中，但是由于ListView中没有确切的长度，因此ScrollBar不会附加到它上，而是设置为0位置

ScrollBar(
 child:
  ListView.builder(
    itemBuilder: (context, i) {
      if (i >= Items.length - 1) {
        Items.add(generateItem());
      }
      return Card(item: Items[i]);
    })
)

Answer 1

将ListView与itemCount一起使用，并在滚动到maxScrollExtent时加载更多数据
您可以在

下看到完整的代码

代码段

Scrollbar(
        child: ListView.builder(
          itemCount: _listViewData.length,
          controller: _scrollController,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_listViewData[index]),
            );
          },
        ),
      ),

完整代码

import 'package:flutter/material.dart';
import 'package:infinite_listview/infinite_listview.dart';

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

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: InfiniteScrollListView(),
    );
  }
}

class InfiniteScrollListView extends StatefulWidget {
  _InfiniteScrollListViewState createState() => _InfiniteScrollListViewState();
}

class _InfiniteScrollListViewState extends State<InfiniteScrollListView> {
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadMore();
      }
    });
  }

  _loadMore() {
    setState(() {
      print('loading more,...');
      //if we're at the end of the list, add more items
      _listViewData..addAll(List<String>.from(_listViewData));
    });
  }

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

  List<String> _listViewData = [
    "Inducesmile.com",
    "Flutter Dev",
    "Android Dev",
    "iOS Dev!",
    "React Native Dev!",
    "React Dev!",
    "express Dev!",
    "Laravel Dev!",
    "Angular Dev!",
    "Adonis Dev!",
    "Next.js Dev!",
    "Node.js Dev!",
    "Vue.js Dev!",
    "Java Dev!",
    "C# Dev!",
    "C++ Dev!",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Infinite Scroll in ListView Example'),
      ),
      body: Scrollbar(
        child: ListView.builder(
          itemCount: _listViewData.length,
          controller: _scrollController,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_listViewData[index]),
            );
          },
        ),
      ),
    );
  }
}

Answer 2

第一次删除滚动条

并尝试以下操作：

ListView.builder(
          itemCount: _listViewData.length,
          shrinkWrap: true,
          controller: _scrollController,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_listViewData[index]),
            );
          },
        ),

添加shrinkWrap可能会帮助

滚动条到无穷大ListView

2 个答案: