Flutter Stateful Widget используется на нескольких экранах, получая Rebuilt - PullRequest
0 голосов
/ 21 марта 2020

я создал приведенный ниже виджет Multiselect Chip Widget, использующий Provider и Listening для внесения изменений в список

виджет создает список чипов выбора, который позволяет выбирать чипы с несколькими вариантами выбора

class MultiSelectChip extends StatefulWidget {
  final Function(List<String>) onSelectionChanged;

  MultiSelectChip({this.onSelectionChanged});

  @override
  _MultiSelectChipState createState() => _MultiSelectChipState();
}

class _MultiSelectChipState extends State<MultiSelectChip> {
  List<String> selected = List();
  List<Clinic> clinicList = List();

  @override
  void didChangeDependencies() {
    final list = Provider.of<ClinicProvider>(context).clinics;

    final clinic = Clinic(
        id: null,
        name: "All Clinics",
        city: null,
        suburb: null,
        postcode: null,
        prate: null,
        udarate: null,
        goal: null,
        uid: null);

    clinicList.add(clinic);
    selected.add(clinicList[0].name);
    list.forEach((clinic) => clinicList.add(clinic));
    super.didChangeDependencies();
  }

  _buildList() {
    List<Widget> choices = List();

    clinicList.forEach((item) {
      choices.add(Padding(
        padding: const EdgeInsets.only(left: 5.0, right: 5.0),
        child: ChoiceChip(
          key: Key("${item.name}"),
          shape: selected.contains(item.name)
              ? RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(0),
                  ),
                )
              : RoundedRectangleBorder(
                  side: BorderSide(
                      color: Color.fromRGBO(46, 54, 143, 1), width: 1.0),
                  borderRadius: BorderRadius.circular(0.0),
                ),
          label: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(item.name),
          ),
          onSelected: (value) {
            setState(() {
              selected.contains(item.name)
                  ? selected.remove(item.name)
                  : selected.add(item.name);
              widget.onSelectionChanged(selected);
            });
          },
          selected: selected.contains(item.name),
          selectedColor: Color.fromRGBO(46, 54, 143, 1),
          labelStyle:
              selected.contains(item.name) ? kChipActive : kChipInActive,
          backgroundColor: Colors.transparent,
        ),
      ));
    });

    return choices;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, top: 5.0, bottom: 5.0),
      child: SizedBox(
        height: 50,
        width: double.infinity,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: _buildList(),
        ),
      ),
    );
  }
}

когда я щелкаю по этому экрану журнала и перехожу на экран NewLog и возвращаюсь к экрану журнала

class LogScreen extends StatefulWidget {
  static const String id = 'logscreen';
  @override
  _LogScreenState createState() => _LogScreenState();
}

class _LogScreenState extends State<LogScreen> {
  MonthSelector selectedMonth;
  List<String> selectedItems = List();

  static DateTime now = DateTime.now();
  static DateTime end = DateTime(now.year, now.month + 1, 0);
  static DateTime start = DateTime(now.year, now.month, 1);

  MonthSelector currentMonth = MonthSelector(
      monthName: DateFormat("MMMM").format(now),
      monthStart: start,
      monthEnd: end);

  void refreshData(MonthSelector selector) async {
    await Provider.of<LogProvider>(context, listen: false)
        .getLogs(selector.monthStart, selector.monthEnd);
    await Provider.of<LogProvider>(context, listen: false)
        .loadTreatments(selector.monthStart, selector.monthEnd);
  }

  @override
  Widget build(BuildContext context) {
    final List<LogSummary> list = Provider.of<LogProvider>(context).summary;
    final List<FlSpot> chartData = Provider.of<LogProvider>(context).spots;

    return Container(
      color: Color.fromRGBO(246, 246, 246, 1),
      child: Column(
        children: <Widget>[
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(
                        height: 15,
                      ),
                      RawMaterialButton(
                        onPressed: () {
                          Navigator.pushNamed(context, NewLogScreen.id);
                        },
                        constraints: BoxConstraints.tight(Size(60, 60)),
                        child: Icon(
                          Icons.add,
                          color: Color.fromRGBO(255, 255, 255, 1),
                          size: 30,
                        ),
                        shape: CircleBorder(),
                        fillColor: Color.fromRGBO(46, 54, 143, 1),
                        padding: EdgeInsets.all(15.0),
                        elevation: 1,
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        'Add log',
                        style: kAddLogLabel,
                      )
                    ],
                  ),
                ),
              ]),
          list.isEmpty || chartData.isEmpty
              ? Expanded(
                  child: Center(
                    child: Text("No Log Data.."),
                  ),
                )
              : Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Container(
                        height: 150,
                        alignment: Alignment.center,
                        child: LineChartWidget(
                          list: chartData,
                          isDollar: true,
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      MultiSelectChip(
                        onSelectionChanged: (selectedList) async {
                          setState(() {
                            selectedItems = selectedList;
                          });
                          await Provider.of<LogProvider>(context, listen: false)
                              .filterLogList(selectedItems);
                        },
                      ),
                      MonthSelect(Color.fromRGBO(246, 246, 246, 1),
                          onMonthSelectionChanged: (selected) {
                        setState(() {
                          selectedMonth = selected;
                        });
                        selectedMonth == null
                            ? refreshData(currentMonth)
                            : refreshData(selectedMonth);
                      }),
                      Padding(
                        padding:
                            const EdgeInsets.only(top: 10, left: 0, right: 0),
                        child: Container(
                          width: double.infinity,
                          height: 1.0,
                          color: kDividerColor,
                        ),
                      ),

то, что я вижу, это то, что микросхема Multiselect имеет тот же список элементов, перерисованный / добавленный к представлению списка 3 раза, каждый раз, когда я go на экране NewLog, список продолжает расти

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

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

спасибо

1 Ответ

1 голос
/ 21 марта 2020

Вы пытались указать listen: false в Provider.of(), используемом в didChangeDependencies()? Это может решить проблему.

Однако, риск все еще может быть. Я сомневаюсь, что инициализация чего-то там является безопасным, потому что didChangeDependencies() вызывается, когда / всякий раз, когда зависимость объекта State изменяется, как написано в его документе . Было бы безопаснее сделать это в initState() или сделать это снаружи только один раз, и его результат был передан в MultiSelectChip.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...