如何设置/更新状态的状态部件从其他状态部件在颤动？

  1. 例如，在下面的代码加上按钮工作，并能够更新 文本，但减号按钮没有。
  2. 但是如果我们按下浮动按钮，状态就会刷新。
  3. 减号按钮正在改变变量的值，但是没有改变 更新父小部件的状态。

enter image description here

这是密码。

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}


int number;


EdgeInsets globalMargin = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0);
TextStyle textStyle = const TextStyle(
fontSize: 100.0,
color: Colors.black,
);


class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);


final String title;


@override
_MyHomePageState createState() => new _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
number = number ?? 0;
}


@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Column(
children: <Widget>[
new Text(
number.toString(),
style: textStyle,
),
new GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
new InkResponse(
child: new Container(
margin: globalMargin,
color: Colors.green,
child: new Center(
child: new Text(
"+",
style: textStyle,
),
)),
onTap: () {
setState(() {
number = number + 1;
});
},
),
new Sub(),
],
),
],
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
setState(() {});
},
child: new Icon(Icons.update),
),
);
}
}


class Sub extends StatefulWidget {
@override
_SubState createState() => new _SubState();
}


class _SubState extends State<Sub> {
@override
Widget build(BuildContext context) {
return new InkResponse(
child: new Container(
margin: globalMargin,
color: Colors.red,
child: new Center(
child: new Text(
"-",
style: textStyle,
),
)),
onTap: () {
setState(() {
number = number - 1;
});
},
);
}
}
219413 次浏览
小开
最佳答案

老方案 :

  1. 创建一个 _ MyHomePageState 的全局实例，在 _ SubState 中使用此实例 as _ myHomePageState.setState
  2. No need to create a global instance. Instead, just pass the parent instance to the child widget

新的解决方案 : 传递回调似乎是比上述解决方案更好的解决方案

CODE UPDATED AS PER FLUTTER 2.0:

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}


EdgeInsets globalMargin =
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0);
TextStyle textStyle = const TextStyle(
fontSize: 100.0,
color: Colors.black,
);


class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
int number = 0;


@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('SO Help'),
),
body: new Column(
children: <Widget>[
new Text(
number.toString(),
style: textStyle,
),
new GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
new InkResponse(
child: new Container(
margin: globalMargin,
color: Colors.green,
child: new Center(
child: new Text(
"+",
style: textStyle,
),
)),
onTap: () {
setState(() {
this.number++;
});
},
),
new Sub(onTap: () {
setState(() {
this.number--;
});
}),
],
),
],
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
setState(() {});
},
child: new Icon(Icons.update),
),
);
}
}


class Sub extends StatelessWidget {
final Function onTap;
Sub({this.onTap});


@override
Widget build(BuildContext context) {
return new InkResponse(
child: new Container(
margin: globalMargin,
color: Colors.red,
child: new Center(
child: new Text(
"-",
style: textStyle,
),
),
),
onTap: this.onTap,
);
}
}

如果有用就告诉我。

小开

1. 在子部件上: 添加参数函数参数

class ChildWidget extends StatefulWidget {
final Function() notifyParent;
ChildWidget({Key key, @required this.notifyParent}) : super(key: key);
}

在 Parent Widget 上: 为子元素创建一个回调函数

refresh() {
setState(() {});
}

3.On Parent Widget : pass parentFunction to Child Widget

new ChildWidget( notifyParent: refresh );

4. 关于子部件: 调用父函数

  widget.notifyParent();
小开

Screenshot (Parent to child, Child to parent):

enter image description here

This examples shows calling a method

  1. Defined in Child widget from Parent widget.
  2. 在 Child 小部件的 Parent 小部件中定义。

密码:

class ParentPage extends StatelessWidget {
final GlobalKey<ChildPageState> _key = GlobalKey();


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Parent")),
body: Center(
child: Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.grey,
width: double.infinity,
alignment: Alignment.center,
child: ElevatedButton(
child: Text("Call method in child"),
onPressed: () => _key.currentState!.methodInChild(), // calls method in child
),
),
),
Text("Above = Parent\nBelow = Child"),
Expanded(
child: ChildPage(
key: _key,
function: methodInParent,
),
),
],
),
),
);
}


methodInParent() => Fluttertoast.showToast(msg: "Method called in parent", gravity: ToastGravity.CENTER);
}


class ChildPage extends StatefulWidget {
final VoidCallback function;


ChildPage({Key? key, required this.function}) : super(key: key);


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


class ChildPageState extends State<ChildPage> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.teal,
width: double.infinity,
alignment: Alignment.center,
child: ElevatedButton(
child: Text("Call method in parent"),
onPressed: () => widget.function(), // calls method in parent
),
);
}


methodInChild() => Fluttertoast.showToast(msg: "Method called in child");
}
小开

我想扩大穆罕默德埃尔拉希德答复，如果你需要 将变量从子小部件传递到父小部件

关于儿童插件:

class ChildWidget extends StatefulWidget {
final Function() notifyParent;
ChildWidget({Key key, @required this.notifyParent}) : super(key: key);
}

在父窗口小部件上

void refresh(dynamic childValue) {
setState(() {
_parentVariable = childValue;
});
}

在父小部件上: 将上面的函数传递给子小部件

new ChildWidget( notifyParent: refresh );

在子小部件上: 使用子小部件中的任何变量调用父函数

widget.notifyParent(childVariable);
小开

尽管以上大多数答案都会有效，但我建议您探索一下提供商或 BloC 架构，这两者都是 Google 推荐的。

简而言之，后者将创建一个流，每当状态发生变化时就向小部件树中的小部件报告，并且无论从何处更新，它都会更新所有相关视图。

这里有一个很好的概述，你可以通过阅读来了解更多关于这个主题的信息: https://bloclibrary.dev/#/

小开

旧的，但是我会根据我的发现加上我的答案:

var ancestralState = context.findAncestorStateOfType<ParentState>();
ancestralState.setState(() {
// here you can access public vars and update state.
...
});
小开

这是对我有效的解决办法。

产出: 当添加项目时，车部件的状态会更新。

enter image description here

通过调用 trigger from anywhere为要更新的小部件创建 globalKey

final GlobalKey<CartWidgetState> cartKey = GlobalKey();

Make sure it's saved in a file have global access such that, it can be accessed from anywhere. 我把它保存在 globalClass 中，通过应用程序的状态保存常用的变量。

class CartWidget extends StatefulWidget {


CartWidget({Key key}) : super(key: key);
@override
CartWidgetState createState() => CartWidgetState();
}


class CartWidgetState extends State<CartWidget> {
@override
Widget build(BuildContext context) {
//return your widget
return Container();
}
}

从其他类调用小部件。

class HomeScreen extends StatefulWidget {


HomeScreen ({Key key}) : super(key: key);
@override
HomeScreenState createState() => HomeScreen State();
}


class HomeScreen State extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return ListView(
children:[
ChildScreen(),
CartWidget(key:cartKey)
]
);
}
}






class ChildScreen extends StatefulWidget {


ChildScreen ({Key key}) : super(key: key);
@override
ChildScreenState createState() => ChildScreen State();
}


class ChildScreen State extends State<ChildScreen> {
@override
Widget build(BuildContext context) {
return InkWell(
onTap: (){
// This will update the state of your inherited widget/ class
if (cartKey.currentState != null)
cartKey.currentState.setState(() {});
},
child: Text("Update The State of external Widget"),
);
}
}
小开 
class HomePage extends StatefulWidget {


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


class HomePageState extends State<HomePage> {


int selectedIndex = 0;


void setSelectedIndex(int index){
setState(() {
selectedIndex = index;
});
}
}


class TestPage extends StatefulWidget {


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


class TestPageState extends State<TestPage> {
int selectedIndex = 0;


@override
Widget build(BuildContext context) {
return  GestureDetector(
onTap: (){


final HomePageState state = context.findAncestorStateOfType<HomePageState>();


state.setSelectedIndex(4);


},
child: Container(
width: 100,
height: 100,
color: Colors.green
)
);
}


}
小开

对于那些希望在子级和父级之间来回传递变量而不使用第三方库的人，这里有一个我用两个计数器按钮编写的示例。当然，我不知道这是否是最佳实践，但我想提供我能创建的最简单的答案:

import 'package:flutter/material.dart';


const Color darkBlue = Color.fromARGB(255, 18, 32, 47);


void main() {
runApp(MyApp());
}


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ParentWid(),
),
),
);
}
}


class ParentWid extends StatefulWidget {
@override
State<ParentWid> createState() => _ParentWidState();
}


class _ParentWidState extends State<ParentWid> {
int counter = 0;
  

void refresh(int childValue) {
setState(() {
counter = childValue;
});
}
  

@override
Widget build(BuildContext context) {
return Column(children:[
IconButton(
onPressed: () {
setState(() {
counter++;
});
},
icon: const Icon(Icons.add),
),
ChildWid(counter, refresh)
]);
}
}


class ChildWid extends StatefulWidget {
final Function(int) notifyParent;
final int? counter;
const ChildWid(this.counter, this.notifyParent);


@override
State<ChildWid> createState() => _ChildWidState();
}


class _ChildWidState extends State<ChildWid> {
@override
Widget build(BuildContext context) {
return Column(children:[
Text(
'Current Counter ${widget.counter ?? 0}',
style: Theme.of(context).textTheme.headline4,
),
IconButton(
onPressed: () {
int counterHolder = widget.counter ?? 0;
counterHolder++;
widget.notifyParent(counterHolder);
},
icon: const Icon(Icons.add),
),
]);
}
}

提交答案