флаттер: нет индикатора обновления при использовании RefreshIndicator

Я добавил 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 не дает много информации.


flutter dart pull-to-refresh
person mianlaoshu    schedule 05.01.2019    source источник

Ответы (3)


arrow_upward
28
arrow_downward

Вам нужно добавить дочерний элемент прокрутки внутри 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...');

  }
}
person Ahmed    schedule 05.01.2019
comment
он не работает с ListView.builder! Любые альтернативы? - person abrsh; 19.05.2020
comment
Просто добавим к этому: индикатор обновления может не работать, когда элементы занимают высоту меньше родительской высоты. Это связано с тем, что прокрутка не разрешена, когда элементы занимают меньше места, чем родительский элемент, а индикатор обновления позволяет обновлять только тогда, когда дочерний элемент разрешает прокрутку. Проверьте ответ @Paresh Mangukiya - person Nikhileshwar; 24.12.2020

arrow_upward
32
arrow_downward

Использование AlwaysScrollableScrollPhysics() гарантирует, что представление прокрутки всегда прокручивается и, следовательно, может вызвать RefreshIndicator.

Прямо сейчас я думаю Создать физику прокрутки с помощью BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics), а не только AlwaysScrollableScrollPhysics() физики прокрутки. Потому что BouncingScrollPhysics работает для коротких списков отказов. Теперь для ожидаемого поведения требуется включить AlwaysScrollableScrollPhysics.

RefreshIndicator(
    onRefresh: _onRefresh,
    child: ListView(
      padding: EdgeInsets.all(8.0),
      physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
      children: _listData.map((i) {
        return ListTile(
          title: Text("Item $i"),
        );
      }).toList(),
    )
);

введите здесь описание изображения

person Paresh Mangukiya    schedule 02.10.2020
comment
Это устраняет проблему, если RefreshIndicator не работает в коротком списке. - person Michał Powłoka; 13.01.2021
comment
На самом деле вы можете использовать физику: AlwaysScrollableScrollPhysics(). Это активирует ваш индикатор обновления, когда он потянется вниз, и не имеет значения, является ли список коротким или длинным. Также убедитесь, что задача в обратном вызове onRefresh() является ожидаемой или Future void. - person Uchenna Nnodim; 19.03.2021

arrow_upward
25
arrow_downward

По замыслу RefreshIndicator работает с ListView.

Но если вы хотите использовать RefreshIndicator с непрокручиваемыми виджетами, вы можете обернуть свой виджет в Stack с помощью ListView:

RefreshIndicator(
  onRefresh: () {},
  child: Stack(
    children: <Widget>[ListView(), YOUR_CHILD_WIDGET],
  ),
),
person ahmed khattab    schedule 13.05.2020
comment
Ваше решение лучшее. - person Phuc Nguyen; 25.02.2021