在Flutter中向有状态小部件传递数据

svgewumm  于 2023-01-02  发布在  Flutter
关注(0)|答案(8)|浏览(240)

我想知道,在创建有状态小部件时,向它传递数据的推荐方法是什么。
我见过的两种风格是:

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中,而是存储在小部件中。
对此是否有最佳实践?

x9ybnkn6

x9ybnkn61#

不要使用State的构造函数将参数传递给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")
    );
  }
}
zdwk9cvp

zdwk9cvp2#

    • 最好的方法是不要使用State类的构造函数将参数传递给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)));
7dl7o3gd

7dl7o3gd3#

另一个答案,基于@RémiRousselet的anwser和@user6638204的问题,如果你想传递初始值,并且以后仍然能够在状态中更新它们:

class MyStateful extends StatefulWidget {
  final String foo;

  const MyStateful({Key key, this.foo}): super(key: key);

  @override
  _MyStatefulState createState() => _MyStatefulState(foo: this.foo);
}

class _MyStatefulState extends State<MyStateful> {
  String foo;

  _MyStatefulState({this.foo});

  @override
  Widget build(BuildContext context) {
    return Text(foo);
  }
}
cotxawn7

cotxawn74#

用于传递初始值(不向构造函数传递任何内容)

class MyStateful extends StatefulWidget {
  final String foo;

  const MyStateful({Key key, this.foo}): super(key: key);

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

class _MyStatefulState extends State<MyStateful> {
  @override
  void initState(){
    super.initState();
    // you can use this.widget.foo here
  }

  @override
  Widget build(BuildContext context) {
    return Text(foo);
  }
}
falq053o

falq053o5#

Flutter的有状态小部件API有点笨拙:将数据存储在Widget中,以便在State对象中的build()方法中访问它🤦如果您不想使用一些更大的状态管理选项(Provider,BLoC),请使用flutter_hooks(https://pub.dev/packages/flutter_hooks)-它是SatefullWidget s的更好、更干净的替代品:

class Counter extends HookWidget {
  final int _initialCount;

  Counter(this._initialCount = 0);
  
  @override
  Widget build(BuildContext context) {
    final counter = useState(_initialCount);

    return GestureDetector(
      // automatically triggers a rebuild of Counter widget
      onTap: () => counter.value++,
      child: Text(counter.value.toString()),
    );
  }
}
2jcobegt

2jcobegt6#

@Rémi Rousselet,@Sanjayrajsinh,@Daksh Shah也更好。但我也定义了这是在起点。哪个参数是哪个值

import 'package:flutter/material.dart';
    
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      String name = "Flutter Demo";
      String description = "This is Demo Application";
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MainActivity(
            appName: name,
            appDescription: description,
          ),
        );
      }
    }
    
    class MainActivity extends StatefulWidget {
      MainActivity({Key key, this.appName, this.appDescription}) : super(key: key);
      var appName;
      var appDescription;
    
      @override
      _MainActivityState createState() => _MainActivityState();
    }
    
    class _MainActivityState extends State<MainActivity> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.appName),
          ),
          body: Scaffold(
            body: Center(
              child: Text(widget.appDescription),
            ),
          ),
        );
      }
    }
uxh89sit

uxh89sit7#

最佳实践是将有状态小部件类定义为不可变,这意味着定义所有依赖项(到达参数)作为最终参数。并通过状态类中的widget.<fieldName>访问它们。如果要更改它们的值(如重新分配),则应在状态类中定义相同类型的属性,并在initState函数中重新分配它们。强烈建议不要在有状态的小部件类中定义任何非final属性,并将其设置为mutable类。类似于以下模式:

class SomePage extends StatefulWidget{
  final String? value;
  SomePage({this.value});

  @override
  State<SomePage> createState() => _SomePageState();
}

class _SomePageState extends State<SomePage> {
  String? _value;

  @override
  void initState(){
    super.initState();
    setState(() {
      _value = widget.value;
    });
  }

 @override
 Widget build(BuildContext context) {
    return Text(_value);
 }
}
uoifb46i

uoifb46i8#

要将data传递给有状态小部件,首先创建两个页面,现在从第一个页面打开第二个页面并传递数据。

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

相关问题