Как анимировать контейнер внутри списка - PullRequest
Новая
       10

Как анимировать контейнер внутри списка

2 голосов
/ 12 июня 2019

У меня есть список контейнеров, и я хочу анимировать контейнер.

Например, измените его высоту / ширину и измените содержимое контейнера.

What I 'до сих пор мы сделали следующее: 

containerHeight =  MediaQuery.of(context).size.height * 0.20;
body: Container(
            child: ListView.builder(
              itemCount: data.length,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
          padding: const EdgeInsets.all(15.0),
          child: Container(
            color: Colors.black,
            height: containerHeight,
            child: IconButton(
              icon: Icon(Icons.list),
              color: Colors.white,
              onPressed: () {
                setState(() {
                 containerHeight =  MediaQuery.of(context).size.height * 0.35;
                });
              },
            ),
          ),
        );
              },
            ),

Я планирую использовать AnimatedContainer, но даже сейчас, прежде чем использовать его, если я нажму кнопку, ничего не произойдет

1 Ответ

3 голосов
/ 12 июня 2019

Вот как я заставил это работать. Я только что заменил контейнер на анимированный контейнер 

class _HomePageState extends State<HomePage> {
  List<String> dataList = ['Andrew', 'Test', 'Data', 'Random'];
  double containerHeight;
  bool expanded = false;

  @override
  Widget build(BuildContext context) {
    containerHeight = expanded
        ? MediaQuery.of(context).size.height * 0.20
        : MediaQuery.of(context).size.height * 0.30;
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          return AnimatedContainer(
            curve: Curves.easeOut,
            duration: Duration(milliseconds: 400),
            color: Colors.red,
            height: containerHeight,
            margin: EdgeInsets.all(8),
            child: Center(
              child: Text(
                dataList.elementAt(index),
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        setState(() {
          expanded = !expanded;
        });
      }),
    );
  }
}

выход

enter image description here

EDIT

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

class DataModel {
  String title;
  bool expanded;

  DataModel(this.title) {
    expanded = false;
  }
}

Здесь, расширенный будет отслеживать, должен ли контейнер быть большим или маленьким.

Теперь немного рефакторинг предыдущего кода 

class _HomePageState extends State<HomePage> {


  // Initialize DATA MODEL list with some random values.
  List<DataModel> dataList = ['Andrew', 'Test', 'Data', 'Random']
      .map<DataModel>((s) => DataModel(s))
      .toList();

  double containerHeight;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {

          DataModel item = dataList.elementAt(index);

          // Check if the item is expanded or not and set size accordingly
          containerHeight = item.expanded
              ? MediaQuery.of(context).size.height * 0.20
              : MediaQuery.of(context).size.height * 0.30;

          return GestureDetector(
            onTap: (){
              // On tap reverse the expanded state of the data which will resize
              // the widget as setState is being called
              setState(() {
                item.expanded = !item.expanded;
              });
            },
            child: AnimatedContainer(
              curve: Curves.easeOut,
              duration: Duration(milliseconds: 400),
              color: Colors.red,
              height: containerHeight,
              margin: EdgeInsets.all(8),
              child: Center(
                child: Text(
                  dataList.elementAt(index).title,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
...