Блог

Главная - Вопросы по программированию - Анимированный переключатель Listview

Анимированный переключатель Listview

#flutter

Вопрос:

Я рассматриваю создание представления списка, в котором по умолчанию отображается список названий, и при нажатии на него тот же элемент расширяется, чтобы показать более подробную информацию. Я подумал об использовании анимированного переключателя, и вот что я сделал

 Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) => GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          setState(() {
            selectedIndex = index;
          });
        },
        child: AnimatedSwitcher(
          child: _listItem(index),
          duration: const Duration(milliseconds: 300),
        ),
      ),
    );
  }

Widget _listItem(int index) {
    return index == selectedIndex
        ? Container(
            height: 300,
            color: Colors.black,
            child: Center(
              child: Text("Selected"),
            ),
          )
        : Container(
            height: 50,
            color: colors[index],
          );
  }

При нажатии он изменяет виджет, но без анимации. Я думаю, что AnimatedSwitcher нельзя использовать здесь, так как же еще это можно сделать ?

Комментарии:

1. проверять ExpansionTile

2. Плитка расширения имеет заголовок и его элемент ниже, я рассматривал возможность использования одного и того же элемента для отображения расширенного представления.

3. так что проверьте, как они расширяют элемент здесь и реализуют его таким же образом (волшебство происходит в строке № 280 — heightFactor: _heightFactor.value, )

4. @pskink Спасибо за это, я тоже соединил фактор высоты с непрозрачностью, так что теперь заголовок исчезает, одновременно бросаясь в глаза, а виджет внизу расширяется одновременно.

5. это хорошо, это работает

Метки: