使用SmartRefresher列表显示被拉伸

[bianweiall]

import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import './controller.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

class CreativeCenterPage2 extends GetView<CreativeCenterController> {
  const CreativeCenterPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          removeBottom: false,
          child: Obx(
            () => Scrollbar(
                controller: controller.scrollController,
                child: SmartRefresher(
                  enablePullDown: true,
                  enablePullUp: true,
                  header: const WaterDropHeader(
                    complete: Text("刷新完成"),
                  ),
                  footer: CustomFooter(
                    builder: (BuildContext context, LoadStatus? mode) {
                      final Widget body;
                      switch (mode) {
                        case LoadStatus.idle:
                          body = const Text("上拉加载");
                          break;
                        case LoadStatus.loading:
                          body = const CupertinoActivityIndicator();
                          break;
                        case LoadStatus.failed:
                          body = const Text("加载失败！点击重试！");
                          break;
                        case LoadStatus.canLoading:
                          body = const Text("加载更多!");
                          break;
                        default:
                          body = const Text("没有更多数据了!");
                      }

                      return SizedBox(
                        height: 50,
                        child: Center(child: body),
                      );
                    },
                  ),
                  controller: controller.refreshController,
                  onRefresh: controller.onRefresh,
                  onLoading: controller.onLoading,
                  child: ListView.builder(
                    itemBuilder: (context, index) {
                      var object = controller.items[index];
                      return Container(
                        constraints: const BoxConstraints(maxWidth: 800),
                        margin: const EdgeInsets.only(left: 10, right: 10),
                        padding: const EdgeInsets.only(top: 10, bottom: 10),
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              width: 1,
                              color: Colors.grey[100]!,
                            ),
                          ),
                        ),
                        child: Center(child: Text(object.name)),
                      );
                    },
                    padding: const EdgeInsets.all(1.0),
                    controller: controller.scrollController,
                    itemCount: controller.items.length,
                    physics: const AlwaysScrollableScrollPhysics(),
                  ),
                )),
          )),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.onAdd,
        child: const Icon(Icons.add),
      ),
    );
  }
}

拉伸后:

正常:

[ASongTong]

same problem in Android device

[moepanda]

+1

[KirstenDunst]

same error。But you can use physics: const BouncingScrollPhysics() temporary endings `SmartRefresher(

      physics: const BouncingScrollPhysics(),...`，Looks like AlwaysScrollableScrollPhysics () mapping and SmartRefresher incompatible。

[KirstenDunst]

`SmartRefresher(

  physics: const BouncingScrollPhysics(),...`

[KirstenDunst]

Or you can leave pull_to_refresh3 out and use pull_to_refresh^2.0.0 instead

[anjarnaufals]

Hello @bianweiall

I try refactor your code a little bit , hope this can help

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final RefreshController _refreshController = RefreshController();

  Future<void> testRefresh() async {
    _refreshController.requestRefresh();
    await Future.delayed(Durations.extralong4);
    _refreshController.refreshCompleted();
  }

  Future<void> testLoadMore() async {
    _refreshController.requestLoading();
    await Future.delayed(Durations.extralong4);
    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        removeBottom: false,
        child: Scrollbar(
          child: SmartRefresher(
            controller: _refreshController,
            enablePullDown: true,
            enablePullUp: true,
            header: const WaterDropHeader(
              complete: Text("刷新完成"),
            ),
            footer: CustomFooter(
              builder: (BuildContext context, LoadStatus? mode) {
                final Widget body;
                switch (mode) {
                  case LoadStatus.idle:
                    body = const Text("上拉加载");
                    break;
                  case LoadStatus.loading:
                    body = const CupertinoActivityIndicator();
                    break;
                  case LoadStatus.failed:
                    body = const Text("加载失败！点击重试！");
                    break;
                  case LoadStatus.canLoading:
                    body = const Text("加载更多!");
                    break;
                  default:
                    body = const Text("没有更多数据了!");
                }

                return SizedBox(
                  height: 50,
                  child: Center(child: body),
                );
              },
            ),
            onRefresh: () async {
              testRefresh();
            },
            onLoading: () {
              testLoadMore();
            },
            child: ListView.builder(
             physics: const AlwaysScrollableScrollPhysics(),
              itemCount: 32,
              itemBuilder: (_, index) {
                return Container(
                  constraints: const BoxConstraints(maxWidth: 800),
                  margin: const EdgeInsets.only(left: 10, right: 10),
                  padding: const EdgeInsets.only(top: 10, bottom: 10),
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        width: 1,
                        color: Colors.grey[100]!,
                      ),
                    ),
                  ),
                  child: Center(child: Text('list index - $index')),
                );
              },
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

[JuYiYang]

我也遇到了，而且我是第一次下拉刷新正常 第二次被拉伸 第三次又好了 ，我修改ListView的physics不起作用，但是我把数据塞满整屏后，不管如何刷新页面都正常

[MaAnShanGuider]

遇到了相同的问题，进入页面后，再向下拉就会出现，列表内容就会被拉伸。而且，底部的no more状态，也是没了。目前还没找到合适的办法解决，

[bh1270]

SmartRefresher use physics: const BouncingScrollPhysics() can be solved，you can also useMaterial3: false, if you flutter sdk 3.16 、3.22.2

[Mingyueyixi]

我直接降级到2.0.1版本

[WangQFLucky]

上面的回答有效 physics: const BouncingScrollPhysics(),