Блог

Следующий вопрос:

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

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

Я предполагаю, что я либо использовал неправильный дочерний элемент, либо отсутствует что-то вроде уникального ключа (который я не знаю, как реализовать)

Вот необходимые части моего кода:

Выпадающее меню:

 @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      child:DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: selectedItem,
          onChanged: (String string) => setState(() {
            streamController.sink.add(string);
            return selectedItem = string;
          }),
          selectedItemBuilder: (BuildContext context) {
            return items.map<Widget>((String item) {
              return Text(item,
                //style: TextStyle(fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              );
            }).toList();
          },
          items: items.map((String item) {
            return DropdownMenuItem<String>(
              child: Text('$item',
                //style: TextStyle(fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              ),
              value: item,
            );
          }).toList(),
        ),
      ),
    );
  }
}
 

StreamBuilder и AnimatedSwitcher:

 StreamBuilder(
            stream: streamController.stream,
            builder: (context, snapshot) {
               return AnimatedSwitcher(
                   duration: Duration(seconds: 1),
                    child: updateBestandteile(snapshot.data),
               );
            },
          ),
 

Пример условия:

 Padding updateBestandteile(String i) {
    switch (i) {

      case "MMF":
      {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 200,
            decoration: BoxDecoration(
              color: b,
              borderRadius: BorderRadius.circular(10.0)
              ),
            child: Align(
              alignment: Alignment.center,
              child: Row(
                children: [
                  Column(
                    children: [
                      Text('Zu verwendende Präparate:',
                        style: TextStyle(fontWeight: FontWeight.bold)),
                      Text('Medetomidin 1mg/ml'),
                      Text('Midazolam 5mg/ml'),
                      Text('Fentanyl 0.5mg/ml'),
                      Text('NaCl 0,9%'),
                    ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  ),
                  Column(
                    children: [
                      Text('Anzumischende Menge:',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text((MedetomidindosierungmgprokgKGW*selectedamount*selectedweight/(1000*Medetomidinmgproml)).toString() "ml"),
                      Text((MidazolamdosierungmgprokgKGW*selectedamount*selectedweight/(1000*Midazolammgproml)).toString() "ml"),
                      Text((FentanyldosierungmgprokgKGW*selectedamount*selectedweight/(1000*Fentanylmgproml)).toString() "ml"),
                      Text((((MedetomidindosierungmgprokgKGW*selectedamount*selectedweight/(1000*Medetomidinmgproml)) (MidazolamdosierungmgprokgKGW*selectedamount*selectedweight/(1000*Midazolammgproml)) (FentanyldosierungmgprokgKGW*selectedamount*selectedweight/(1000*Fentanylmgproml)))*4).toString() "ml"),
                  ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          ),
        ),
      ),
      );
      }
      break;
 

Надеюсь, вы сможете помочь, как и в прошлый раз 🙂 Заранее спасибо!
Приветствую,
P

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

Пожалуйста, обратитесь к документам Flutter для AnimatedSwitcher и посмотрите видеоролик AnimatedSwitcher «Виджет недели» от команды Flutter.

Если «новый» дочерний элемент имеет тот же тип и ключ виджета, что и «старый» дочерний элемент, но с другими параметрами, то AnimatedSwitcher не будет выполнять переход между ними, поскольку с точки зрения фреймворка это один и тот же виджет, и существующий виджет можно обновить с помощью новых параметров. Чтобы принудительно выполнить переход, установите для каждого дочернего виджета ключ, который вы хотите считать уникальным (обычно ValueKey в данных виджета, который отличает этот дочерний виджет от других).