gpt4 book ai didi

Flutter:我应该如何使用 InheritedWidget?

转载 作者:行者123 更新时间:2023-12-03 08:46:43 25 4
gpt4 key购买 nike

简介:我认为这个问题原则上可能是共享的,但我觉得这个具体的应用程序不是。我谦虚地提交它供考虑,所以请温柔。我的代码在这里陷入了一个明显的陷阱,而且我根本不知道如何修复它。想了几个小时后,我什至不知道该怎么做。

问题:InheritedWidget没有更新其上方小部件中的状态。

期望:我希望当我在HomePagePageView上滑动时,Text BottomAppBar 将更新。然而,这并没有发生。

描述:我正在尝试使用 InheritedWidget (InheritedPageIndex),我在根小部件 (MaterialApp) 通过一个Provider方法(请参阅下面的代码)。其中,有一个值向下传递到小部件树中其下方的小部件 (MenuPage)。我希望这个值在状态改变时更新;我尝试通过在小部件树中位于其下方的小部件中滑动 PageView (HomePage) 来进行修改。

enter image description here

代码:我重新编写并简化了我的代码,以便我们可以更轻松地诊断和修复问题,如下所示:

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;
}

ma​​in.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,
);
}
}

假设:经过大量研究和反射(reflection)。我相信我无法更新 Provider 的值;因为它位于第一个实例化的 InheritedWidget 和更改状态的方法之间。也许另一种说法是我想要改变的 State 就在它的正上方;并且,它采用第二个提供程序的状态而不是使用第一个提供程序的状态?

问题:

1)为了我的利益,我的假设是否正确,或者这里还有其他情况吗?

2) 如何解决我的问题?我不认为实现 BLoC 方法可以解决这个问题,因为它也使用提供程序?

在这种情况下,如果没有 InheritedWidget,我不知道如何将状态传递到 widget 树。

最佳答案

为此您根本不需要软件包。一个有点hacky的方法是围绕inheritedWidget创建一个Wrapper,因为继承的widget不会自行重建,所以您需要在有状态的widget内部使用它。

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

关于Flutter:我应该如何使用 InheritedWidget?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61187248/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com