将数据从 StatelessWidget 传递到 StatefulWidget答案

【问题标题】：Passing data from a StatelessWidget to a StatefulWidget将数据从 StatelessWidget 传递到 StatefulWidget
【发布时间】：2021-04-20 19:43:56
【问题描述】：

我是 Flutter 的新手，我正在尝试创建一个通用按钮小部件，我可以将参数传递给（文本、颜色等），现在保持它的简短为文本。所以我设置了名为SplashScreen 的主应用程序，并在body 中添加了GenericButton 类。我想知道是否有办法让我传递一串文本或任何其他类型的数据，将其保存在我的GenericButton 类中，以便我可以使用widget.buttonText 将其推送到我的_GenericButtonState 中

final String _title = "Flutter Demo";
// * This is the landing page
class SplashScreen extends StatelessWidget {
  // * This widget is the root of your application.
  const SplashScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: _title,
        theme: ThemeData(
          primarySwatch: Colors.deepPurple,
        ),
        home: Scaffold
          (
          appBar: AppBar
            (
              title: Text(_title)
          ),
          body: GenericButton() // <-- Statelful Widget I would like to pass data into.
        )
    );
  }
}

// * Creating reusable button
class GenericButton extends StatefulWidget
{
    final String buttonText;
    const GenericButton(this.buttonText);

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

class _GenericButtonState extends State<GenericButton>
{
  @override
  Widget build(BuildContext context) 
  {
    return OutlinedButton(
      child: Text(widget.buttonText),
      onPressed: ()
      {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => LocationsPage()),
        );
      }, 
    );
  }
}

【问题讨论】：

标签： android flutter dart

【解决方案1】：

您可以通过构造函数正常执行此操作，这是我的一个项目中的工作示例

class PrimaryButton extends StatelessWidget {
  final String text;
  final Color color;
  final Color textColor;
  final Function onTap;
  final EdgeInsets edgeInsets;
  final bool pending;

  const PrimaryButton({
    Key key,
    @required this.text,
    @required this.onTap,
    this.color = AppTheme.primaryColor,
    this.textColor = AppTheme.secondaryColor,
    this.edgeInsets = const EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
    this.pending = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap:  pending ? null: onTap,
      child: Container(
        child: Center(
          child: pending
              ? Padding(
                  padding: const EdgeInsets.all(5.0),
                  child: SpinKitThreeBounce(
                    color: AppTheme.scaffoldBackgroundColor,
                    size: 15.0,
                  ),
                )
              : Text(
                  text,
                  style: AppTheme.textTheme.headline5.copyWith(fontSize: 18.0, fontWeight: FontWeight.bold,color: textColor),
                ),
        ),
        margin: edgeInsets,
        padding: EdgeInsets.all(12.0),
        width: double.infinity,
        decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(8.0)),
      ),
    );
  }
}

【讨论】：

AppTheme.primaryColor 是一个已弃用的调用吗？我在颤振 2.0.5 上，我只能访问 AppBarTheme
不，对不起，这是我自己在单独文件中的课程，你可以为你做 Theme.of(context).primaryColor
如果您的问题解决了，请给答案投票；)

【解决方案2】：

您已经定义了 buttonText 参数。您必须向其中传递一个文本（例如 _title），并且在您想要一个新文本时将其作为新参数传递。

您的 GenericButton 是一个 StatefulWidget，如果 buttonText 参数发生变化，小部件将不会重绘自身。 didChangeDependencies 方法将被触发，您需要手动处理更改：更新 _GenericButtonState 中的任何状态

但是：
如果将 GenericButton 更改为 StatelessWidget，则只要 buttonText 参数更改，小部件就会自行重绘。

结论：
据我了解您要构建什么，您最好有一个带有参数的 GenericButton StatelessWidget 并从父级传递它们，这可能是 StatefulWidget 因为它将管理文本和其他参数的状态。

您可以在此处阅读有关状态管理的更多信息：https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

【讨论】：