Блог

У меня есть прокручиваемый AnimatedList элемент, и я хочу, чтобы всякий раз, когда новый элемент добавляется в конец списка, он прокручивался до конца.

Я пытаюсь применить эту форму кода ListView , но она не работает.

 import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  List<String> list = ["a", "a", "a", "a", "a", "a", "a"];
  final ScrollController _listScrollController = new ScrollController();
  final GlobalKey<AnimatedListState> _listKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: AnimatedList(
          key: _listKey,
          controller: _listScrollController,
          initialItemCount: list.length,
          itemBuilder: (BuildContext context, int index, Animation animation) {
            return FadeTransition(
              opacity: animation,
              child: Container(
                width: itemSize,
                height: itemSize,
                child: Text(list[index]),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: _addNewItem),
    );
  }

  _addNewItem() {
    list.add(list.length.toString());
    _listKey.currentState.insertItem(
      list.length - 1,
      duration: Duration(seconds: 1),
    );

    _listScrollController.animateTo(
      _listScrollController.position.maxScrollExtent, // wrong value (this value is before add new item)
      duration: const Duration(milliseconds: 250),
      curve: Curves.ease,
    );
  }
}

  

Поэтому мне нужно немного изменить код прокрутки.

 const double itemSize = 40.0;

_listScrollController.animateTo(
   _listScrollController.position.maxScrollExtent   itemSize,
   duration: const Duration(milliseconds: 250),
   curve: Curves.ease,
);
  

Но для этого нужно жестко задать itemSize (itemSize) или использовать BuildLayout, RenderBox для определения размера нового элемента. У вас, ребята, есть какие-нибудь лучшие решения?

Проблема в том, что вы анимировали материал перед добавлением элемента. Для добавления элемента потребовалось 1 сек., используйте этот таймер, который будет запускаться через 1 сек.

 Timer(
  Duration(milliseconds: 1100),
  () {
    _listScrollController.animateTo(
      _listScrollController.position.maxScrollExtent,
      duration: const Duration(milliseconds: 250),
      curve: Curves.ease,
    );
  },
);
  

Замените ваш на мой.

 _addNewItem() {
  list.add(list.length.toString());
  _listKey.currentState.insertItem(
    list.length - 1,
    duration: Duration(milliseconds: 200),
  );

  Timer(
    Duration(milliseconds: 220),
    () {
      _listScrollController.animateTo(
        _listScrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 500),
        curve: Curves.ease,
      );
    },
  );
}
  

Вывод: