我想知道在创建有状态小部件时,将数据传递给它的推荐方法是什么。
我看到的两种风格是:
class ServerInfo extends StatefulWidget {
Server _server;
ServerInfo(Server server) {
this._server = server;
}
@override
State<StatefulWidget> createState() => new _ServerInfoState(_server);
}
class _ServerInfoState extends State<ServerInfo> {
Server _server;
_ServerInfoState(Server server) {
this._server = server;
}
}
这个方法在ServerInfo和_ServerInfoState中同时保留一个值,这看起来有点浪费。
另一种方法是使用widget._server:
class ServerInfo extends StatefulWidget {
Server _server;
ServerInfo(Server server) {
this._server = server;
}
@override
State<StatefulWidget> createState() => new _ServerInfoState();
}
class _ServerInfoState extends State<ServerInfo> {
@override
Widget build(BuildContext context) {
widget._server = "10"; // Do something we the server value
return null;
}
}
这似乎有点倒退,因为状态不再存储在_ServerInfoSate中,而是存储在小部件中。
这方面有最佳实践吗?
不要使用State的构造函数将参数传递给它。
您应该只使用this.widget.myField访问参数。
不仅编辑构造函数需要大量手工工作;它不会带来任何东西。没有理由复制Widget的所有字段。
编辑:
这里有一个例子:
class ServerIpText extends StatefulWidget {
final String serverIP;
const ServerIpText ({ Key? key, this.serverIP }): super(key: key);
@override
_ServerIpTextState createState() => _ServerIpTextState();
}
class _ServerIpTextState extends State<ServerIpText> {
@override
Widget build(BuildContext context) {
return Text(widget.serverIP);
}
}
class AnotherClass extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ServerIpText(serverIP: "127.0.0.1")
);
}
}
最好的方法是不要使用State类的构造函数将参数传递给它。您可以使用widget.myField在State类中轻松访问。
例如
class UserData extends StatefulWidget {
final String clientName;
final int clientID;
const UserData(this.clientName,this.clientID);
@override
UserDataState createState() => UserDataState();
}
class UserDataState extends State<UserData> {
@override
Widget build(BuildContext context) {
// Here you direct access using widget
return Text(widget.clientName);
}
}
在导航屏幕时传递数据:
Navigator.of(context).push(MaterialPageRoute(builder: (context) => UserData("WonderClientName",132)));
要将数据传递给有状态小部件,首先要创建两个页面。现在从第一页打开第二页并传递数据。
class PageTwo extends StatefulWidget {
final String title;
final String name;
PageTwo ({ this.title, this.name });
@override
PageTwoState createState() => PageTwoState();
}
class PageTwoStateState extends State<PageTwo> {
@override
Widget build(BuildContext context) {
return Text(
widget.title,
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.w700),
),
}
}
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialButton(
text: "Open PageTwo",
onPressed: () {
var destination = ServicePage(
title: '<Page Title>',
provider: '<Page Name>',
);
Navigator.push(context,
MaterialPageRoute(builder: (context) => destination));
},);
}
}