Проблема с производительностью модального нижнего листа Flutter

При перетаскивании модальных нижних листов приложение флаттера начинает отставать, если внутри листа находится много виджетов. Это происходит только на модальном нижнем листе (showModalBottomSheet), а не на обычном (showBottomSheet). Ниже я прикрепил снимок экрана с анализом производительности, который показывает, что все виджеты внутри листа постоянно перестраиваются, пока пользователь перетаскивает.

Я написал небольшую демонстрацию, чтобы сравнить производительность двух типов листов. Есть ли способ предотвратить перестроение при перетаскивании?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "demo",
      home: Scaffold(
        body: MyButtons(),
      ),
    );
  }
}

class MyButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (context) => BottomSheet(),
              );
            },
            child: Text("show modal (laggy)"),
          ),
          RaisedButton(
            onPressed: () {
              showBottomSheet<void>(
                context: context,
                builder: (context) => BottomSheet(),
              );
            },
            child: Text("show normal (not laggy)"),
          ),
        ],
      ),
    );
  }
}

class BottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8.0,
      alignment: WrapAlignment.center,
      children: List<Widget>.generate(
        100,
        (int index) {
          return InputChip(
            label: Text("test"),
          );
        },
      ),
    );
  }
}


person Kevin Kreps    schedule 24.02.2020    source источник
comment
вы используете режим профиля или отладки для измерения производительности?   -  person Darish    schedule 25.02.2020
comment
@Darish спасибо, что указали на это, я не использовал режим профиля. При использовании режима профиля производительность увеличивается, но проблема все еще существует. Если вдвое больше элементов внутри листа, разница в производительности между модальным и нормальным режимом снова будет четко видна (~ 25 кадров в секунду для модального листа).   -  person Kevin Kreps    schedule 25.02.2020
comment
@Krowit Вы нашли решение этой проблемы? У меня есть сложный виджет внутри модального нижнего листа, и у него такая же проблема с производительностью.   -  person Enol Casielles Martinez    schedule 24.04.2020


Ответы (2)


Я создал этот PR, чтобы исправить эту проблему с производительностью. Проблема заключалась в том, что AnimatedContainer из ModalBottomSheet не использовал свойство child, и поэтому он заставлял вызывать метод builder много раз во время выполнения анимации вместо использования уже созданного дочернего виджета.

person Enol Casielles Martinez    schedule 29.04.2020
comment
Не могли бы вы привести пример кода, как использовать код PR? - person Paresh Mangukiya; 21.09.2020
comment
Извините за задержку, но 16 мая PR уже включен в главный репозиторий flutter. Если вы используете более новую версию фреймворка, вам не нужно ничего делать, чтобы решить эту проблему. - person Enol Casielles Martinez; 27.10.2020

просто обновите флаттер до последней версии. Престижность Enol Casielles Martinez

person naufal hafizi    schedule 01.10.2020