Flutter: как использовать InheritedWidget?

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

Проблема: InheritedWidget не обновляет состояние в виджете над ним.

Ожидание: я ожидал, что когда я проведу по PageView HomePage, Text BottomAppBar обновится. Однако этого не происходит.

Описание: я пытаюсь использовать InheritedWidget (InheritedPageIndex), который я инициализировал над корневым виджетом (MaterialApp ) через метод Provider (см. код ниже). Который имеет значение, которое передается виджету под ним (MenuPage) в дереве виджетов. Я хочу, чтобы это значение обновлялось при изменении состояния; который я пытаюсь изменить, проводя PageView (HomePage) в виджете под ним в дереве виджетов.

введите описание изображения здесь

Код. Я переписал и упростил свой код, чтобы нам было проще диагностировать и устранить проблему. Он выглядит так:

page_index_model.dart

import 'package:flutter/material.dart';

    class PageIndex {
      PageIndex({@required this.index});
      double index = 0;
    }

page_index_provider.dart

import 'package:flutter/cupertino.dart';
import 'package:testinginheritedwidget/models/page_index_model.dart';

class InheritedPageIndex extends InheritedWidget {
  InheritedPageIndex({Key key, @required this.indexData, Widget child})
      : super(key: key, child: child);

  final PageIndex indexData;

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => true;

  static PageIndex of(BuildContext context) => context
      .dependOnInheritedWidgetOfExactType<InheritedPageIndex>()
      .indexData;
}

main.dart

import 'package:flutter/material.dart';
import 'package:testinginheritedwidget/models/page_index_model.dart';
import 'package:testinginheritedwidget/pages/menu_page.dart';
import 'package:testinginheritedwidget/providers/page_index_provider.dart';

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

    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return InheritedPageIndex(
          indexData: PageIndex(index: 0),
          child: MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Testing Inherited Widgets',
            home: MenuPage(),
          ),
        );
      }
    }

menu_page.dart

    import 'package:flutter/material.dart';
    import 'package:testinginheritedwidget/models/page_index_model.dart';
    import 'package:testinginheritedwidget/pages/home_page.dart';
    import 'package:testinginheritedwidget/providers/page_index_provider.dart';

    class MenuPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        PageIndex _pageIndex = InheritedPageIndex.of(context);

        return DefaultTabController(
          length: 3,
          child: Scaffold(
            //TODO: dot indicator
            resizeToAvoidBottomInset: false,
            appBar: AppBar(
              backgroundColor: Colors.black,
              title: Center(
                child: Text('Testing Inherited Widgets',
                    style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
              ),
              bottom: TabBar(
                onTap: (tabIndex) {},
                labelColor: Colors.white,
                indicatorColor: Colors.white,
                tabs: const <Widget>[
                  Tab(icon: Icon(Icons.flight), child: Text('Flight')),
                  Tab(icon: Icon(Icons.map), child: Text('Map')),
                  Tab(icon: Icon(Icons.print), child: Text('Print')),
                ],
              ),
            ),
            body: SafeArea(
              child: TabBarView(
                children: <Widget>[
                  HomePage(),
                  HomePage(),
                  HomePage(),
                ],
              ),
            ),
            bottomNavigationBar: BottomAppBar(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
// *** PROBLEM 1 IS HERE ***
                  Text('${_pageIndex.index}'),
                ],
              ),
            ),
          ),
        );
      }
    }

home_page.dart

    import 'package:flutter/material.dart';
    import 'package:testinginheritedwidget/models/page_index_model.dart';
    import 'package:testinginheritedwidget/providers/page_index_provider.dart';

    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {
      List<Widget> cards = [];

      @override
      Widget build(BuildContext context) {
        PageIndex _pageIndex = InheritedPageIndex.of(context);

        for (var index = 0; index < 7; index++) {
          cards.add(
            Center(
              child: Text(
                '$index',
                style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
              ),
            ),
          );
          print(index);
        }
        return PageView(
          onPageChanged: (index) {
            setState(() {
//*** PROBLEM 2 IS HERE ***
              _pageIndex.index = index.toDouble();
              print('page index: ${_pageIndex.index}');
            });
          },
          children: cards,
        );
      }
    }

Предположение: после долгих исследований и размышлений. Я считаю, что не могу обновить значение Провайдера; потому что он находится между первым экземпляром InheritedWidget и методом, изменяющим состояние. Может быть, иначе сказать, что государство, которое я хочу изменить, находится прямо над ним; и вместо этого он принимает состояние второго провайдера вместо использования первого?

Вопросы:

1) Для моей выгоды: Я прав в своем предположении, или здесь происходит что-то еще?

2) Как я могу решить свою проблему? Я не верю, что реализация метода BLoC решит эту проблему, потому что он тоже использует поставщика?

Я не знаю, как в этом случае передать состояние вверх по дереву виджетов без InheritedWidget.


person George Lee    schedule 13.04.2020    source источник
comment
Здравствуйте, Джордж! Эта проблема проста с поставщиком использования, это невозможно решить, так как при изменении значения поставщика вы должны предоставить прослушивание как истинное, но это приведет к повторной сборке виджета. что я предлагаю использовать rxdart с построителем потоков для нижней строки, где вам нужно отобразить заголовок. затем обновите тему издателя с данными при изменении страницы. Таким образом код будет более чистым и управляемым. pub.dev/packages/rxdart   -  person Mukul Pathak    schedule 13.04.2020


Ответы (3)


Вы должны проверить этот пакет: https://pub.dev/packages/provider, который является оболочкой InheritedWidget . И проверьте ChangeNotiferProvider, который предоставляет ChangeNotifier класс и позволяет уведомлять слушателей при обновлении. Я доступен, если вам нужно больше объяснений

person woprandi    schedule 13.04.2020

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

class MyWrapper extends StatefulWidget {
  const MyWrapper({this.child});
  final Widget child;
  @override
  _MyWrapperState createState() => _MyWrapperState();
}

class _MyWrapperState extends State<MyWrapper> {
  int index = 0;

  changePageIndex(int newIndex) {
    setState(() {
      index = newIndex;
    });
  }

  @override
  Widget build(BuildContext context) {
    return InheritedPageIndex(indexData: index , child: widget.child, state: this);
  }
}

class InheritedPageIndex extends InheritedWidget {
  InheritedPageIndex(
      {Key key, @required this.indexData, @required this.state, Widget child})
      : super(key: key, child: child);
  final _MyWrapperState state;
  final int indexData;

  @override
  bool updateShouldNotify(InheritedPageIndex oldWidget) =>
      indexData != oldWidget.indexData;

  static InheritedPageIndex of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<InheritedPageIndex>();
}

Тогда используйте это так

MyWrapper(
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Testing Inherited Widgets',
    home: MenuPage(),
  ),
);

И, наконец, доступ к нему / изменение его вот так

int indexData = InheritedPageIndex.of(context).indexData; //we access the variable

InheritedPageIndex.of(context).state.changePageIndex(1); //We change it, and all the widgets that accessed the data with InheritedPageIndex.of(context).indexData rebuild themselves
person ValdaXD    schedule 13.09.2020

Пакетное решение

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

Код:

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:stackoverflowquestionthree/counter_model.dart';
import 'package:stackoverflowquestionthree/page_menu.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Testing Inherited Widgets',
      home: ChangeNotifierProvider(
        create: (BuildContext context) => Counter(0),
        child: MenuPage(),
      ),
    );
  }
}

counter_model.dart

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int _counter;

  Counter(this._counter);

  getCounter() => _counter;

  setCounter(int counter) => _counter = counter;

  void increment(int counter) {
    _counter = counter;
    notifyListeners();
  }
}

page_menu.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:stackoverflowquestionthree/counter_model.dart';
import 'package:stackoverflowquestionthree/home_page.dart';

class MenuPage extends StatefulWidget {
  @override
  _MenuPageState createState() => _MenuPageState();
}

class _MenuPageState extends State<MenuPage> {
  var _bloc;

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        //TODO: dot indicator
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          backgroundColor: Colors.black,
          title: Center(
            child: Text('Testing Inherited Widgets',
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
          ),
          bottom: TabBar(
            onTap: (tabIndex) {
              counter.increment(0);
            },
            labelColor: Colors.white,
            indicatorColor: Colors.white,
            tabs: const <Widget>[
              Tab(icon: Icon(Icons.flight), child: Text('Flight')),
              Tab(icon: Icon(Icons.map), child: Text('Map')),
              Tab(icon: Icon(Icons.print), child: Text('Print')),
            ],
          ),
        ),
        body: SafeArea(
          child: TabBarView(
            children: <Widget>[
              HomePage(),
              HomePage(),
              HomePage(),
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //TODO: insert value below.
              Text(counter.getCounter().toString()),
            ],
          ),
        ),
      ),
    );
  }
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:stackoverflowquestionthree/counter_model.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Widget> cards = [];

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    for (var index = 0; index < 7; index++) {
      cards.add(
        Center(
          child: Text(
            '$index',
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
          ),
        ),
      );
      print(index);
    }
    return PageView(
      onPageChanged: (index) {
        setState(() {
          counter.increment(index);
        });
      },
      children: cards,
    );
  }
}
person George Lee    schedule 25.04.2020