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