Question

我正在尝试将 RefreshIndicator 与 Scrollview 一起使用，因为在 RefreshIndicator 中的列表中也需要额外的widgits，但它不起作用。

基本上我想使用 RefreshIndicator 然后在它里面有一个带有多个小部件的列的滚动视图。

提前致谢！

这是我的代码：

class _DashboardState extends State<Dashboard> {
  List<String> _demoData = [];
  @override
  void initState() {
    _demoData = [
      "Flutter",
      "React Native",
      "Cordova/ PhoneGap",
      "Native Script"
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Future doRefresh() {
      return Future.delayed(
        Duration(seconds: 0),
        () {
          setState(() {
            print("refresh worked");
            _demoData.addAll(["Ionic", "Xamarin"]);
          });
        },
      );
    }

    return RefreshIndicator(
      onRefresh: doRefresh,
      child: SingleChildScrollView(
        physics: AlwaysScrollableScrollPhysics(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,         
          children: [
            Container(
              height: 400,
              child: ListView.builder(
                itemBuilder: (ctx, idx) {
                  return Card(
                    child: ListTile(
                      title: Text(_demoData[idx]),
                    ),
                  );
                },
                itemCount: _demoData.length,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

问题是你的有'RefreshIndicator'的列表在另一个列表中，这只会滚动父列表，'RefreshIndicator'所在的子列表不起作用，删除父列表让它只显示子列表如下例所示：

另一个问题也是'doRefresh'方法在Widget的'build'方法里面，像例子一样从'build'方法中取出来：（秒放2或3秒看动画）

class _DashboardState extends State<Dashboard> {
  List<String> _demoData = [];
  @override
  void initState() {
    _demoData = [
      "Flutter",
      "React Native",
      "Cordova/ PhoneGap",
      "Native Script"
    ];
    super.initState();
  }

  Future doRefresh() {
    return Future.delayed(
      Duration(seconds: 3),
      () {
        setState(() {
          print("refresh worked");
          _demoData.addAll(["Ionic", "Xamarin"]);
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
        onRefresh: doRefresh,
        child: ListView.builder(
          itemBuilder: (ctx, idx) {
            return Card(
              child: ListTile(
                title: Text(_demoData[idx]),
              ),
            );
          },
          itemCount: _demoData.length,
        ));
  }
}

如果你想添加更多的小部件，这些小部件必须在 ListView 中，如果你想使用更多的列表，最好使用 CustomScrollView 而不是 ListView

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
        onRefresh: doRefresh,
        child: ListView(
          children: [
            ...List.generate(
                _demoData.length,
                (idx) => Card(
                      child: ListTile(
                        title: Text(_demoData[idx]),
                      ),
                    )),
            Container(
              height: 100,
              width: double.infinity,
              color: Colors.red,
            ),
            ...List.generate(
                _demoData.length,
                (idx) => Card(
                      child: ListTile(
                        title: Text(_demoData[idx]),
                      ),
                    )),
          ],
        ));
  }

RefreshIndicator 不适用于 Scrollview

1 个答案: