从另一个小部件更改一个小部件的状态
Change state of a widget from another widget
我最近开始使用 flutter web。从另一个文件(例如:test.dart)
更改一个文件(例如:Home.dart)中的小部件状态的最佳做法是什么
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color colo = Colors.black;
testA() {
setState(() {
colo = Colors.blue;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
width: 30,
height: 30,
color: colo,
),
GestureDetector(
onTap: () {
testA();
},
child: Container(
child: Text("test"),
))
],
),
);
}
}
在上面的代码中,我创建了一个初始颜色为黑色的框,并使用同一 class MyHomePage 中的手势检测器对其进行了更改。我怎样才能在不同的飞镖文件中使用不同的 class 来做同样的事情。
HomePage.dart
import 'package:flutter/material.dart';
import 'package:testweb/test.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color colo = Colors.black;
testA() {
setState(() {
colo = Colors.blue;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
width: 30,
height: 30,
color: colo,
),
TestB()
],
),
);
}
}
testB.dart
import 'package:flutter/material.dart';
class TestB extends StatefulWidget {
@override
_TestBState createState() => _TestBState();
}
class _TestBState extends State<TestB> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
testA();
},
child: Container(
child: Text("test"),
));
}
}
您可以使用TestB onTap中的Function来设置HomePage容器的颜色。
TestB.dart
import 'package:flutter/material.dart';
class TestB extends StatefulWidget {
Function colorChange;
TestB({this.colorChange});
@override
_TestBState createState() => _TestBState();
}
class _TestBState extends State<TestB> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
widget.colorChange(Colors.blue);
},
child: Container(
child: Text("test"),
));
}
}
Home.dart
import 'package:flutter/material.dart';
import 'package:testweb/test.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color colo = Colors.black;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
width: 30,
height: 30,
color: colo,
),
TestB(colorChange: (color){
setState(() {
colo = color;
});
})
],
),
);
}
}
告诉我它是否有效。
我最近开始使用 flutter web。从另一个文件(例如:test.dart)
更改一个文件(例如:Home.dart)中的小部件状态的最佳做法是什么import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color colo = Colors.black;
testA() {
setState(() {
colo = Colors.blue;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
width: 30,
height: 30,
color: colo,
),
GestureDetector(
onTap: () {
testA();
},
child: Container(
child: Text("test"),
))
],
),
);
}
}
在上面的代码中,我创建了一个初始颜色为黑色的框,并使用同一 class MyHomePage 中的手势检测器对其进行了更改。我怎样才能在不同的飞镖文件中使用不同的 class 来做同样的事情。
HomePage.dart
import 'package:flutter/material.dart';
import 'package:testweb/test.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color colo = Colors.black;
testA() {
setState(() {
colo = Colors.blue;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
width: 30,
height: 30,
color: colo,
),
TestB()
],
),
);
}
}
testB.dart
import 'package:flutter/material.dart';
class TestB extends StatefulWidget {
@override
_TestBState createState() => _TestBState();
}
class _TestBState extends State<TestB> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
testA();
},
child: Container(
child: Text("test"),
));
}
}
您可以使用TestB onTap中的Function来设置HomePage容器的颜色。
TestB.dart
import 'package:flutter/material.dart';
class TestB extends StatefulWidget {
Function colorChange;
TestB({this.colorChange});
@override
_TestBState createState() => _TestBState();
}
class _TestBState extends State<TestB> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
widget.colorChange(Colors.blue);
},
child: Container(
child: Text("test"),
));
}
}
Home.dart
import 'package:flutter/material.dart';
import 'package:testweb/test.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color colo = Colors.black;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
width: 30,
height: 30,
color: colo,
),
TestB(colorChange: (color){
setState(() {
colo = color;
});
})
],
),
);
}
}
告诉我它是否有效。