flutter：使用 RefreshIndicator 时没有刷新指示器

Question

我在我的页面上添加了 RefreshIndicator，但是拉动刷新时没有显示指示器。代码如下：

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: LocalGalleryTab(),
    );
  }
}

class LocalGalleryTab extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LocalGalleryState();
  }
}

class _LocalGalleryState extends State<LocalGalleryTab> {
  @override
  Widget build(BuildContext context) {
    return new Container(child: new Center(
      child: new RefreshIndicator(
        child: Text("Local Gallery"),
        onRefresh: _refreshLocalGallery,
      ),
    ));
  }

  Future<Null> _refreshLocalGallery() async{
    print('refreshing stocks...');

  }
}

如何使用RefreshIndicator？颤动 doc 没有提供太多信息。

Answer 1

你需要在里面添加滚动子RefreshIndicator 请参阅下面的示例

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: LocalGalleryTab(),
    );
  }
}

class LocalGalleryTab extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LocalGalleryState();
  }
}

class _LocalGalleryState extends State<LocalGalleryTab> {
  @override
  Widget build(BuildContext context) {
    return new Container(child: new Center(
      child: new RefreshIndicator(
        child: ListView(
          children: List.generate(50,  (f) => Text("Item $f")),
        ),
        onRefresh: _refreshLocalGallery,
      ),
    ));
  }

  Future<Null> _refreshLocalGallery() async{
    print('refreshing stocks...');

  }
}

Answer 2

根据设计，RefreshIndicator 与 ListView 一起使用。

但是如果您想将 RefreshIndicator 与不可滚动的小部件一起使用，您可以使用 ListView:

将小部件包装到 Stack 中

RefreshIndicator(
  onRefresh: () {},
  child: Stack(
    children: <Widget>[ListView(), YOUR_CHILD_WIDGET],
  ),
),

Answer 3

Refresh Indicator 默认情况下不适用于短列表，因此将以下内容添加到 ListView.builder

physics: const AlwaysScrollableScrollPhysics(),

Answer 4

RefreshIndicator(
   onRefresh: _onRefresh,
   child:SingleChildScrollView(
   physics: AlwaysScrollableScrollPhysics(),
   child: ListView(
   padding: EdgeInsets.all(8.0),

   children: _listData.map((i) {
    return ListTile(
      title: Text("Item $i"),
    );
  }).toList(),
 )
)
);

在 SingleChildScrollView 中添加物理效果

Answer 5

您也可以将 ListView 与 SinglchildScrollView 小部件一起使用。

    RefreshIndicator(
      onRefresh: () {
         //HERE YOUR FUNCTION TO CALL
      },
      child: Stack(
        children: <Widget>[
              ListView(
                physics: const AlwaysScrollableScrollPhysics(),
                 children: []
                )
              ],
            ),
        ),

flutter：使用 RefreshIndicator 时没有刷新指示器

flutter: no refresh indicator when using RefreshIndicator

flutter

dart

refresh

pull-to-refresh

indicator