在返回没有状态小部件的函数的函数中设置变量的值

Question

我正在从事电子商务项目，该项目展示了几种产品。因此，我必须创建具有产品主要组件的单独类，以便在列表构建器中多次调用它。 下图显示用户可以按下 + 或 - 按钮来更改内部文本的值，但这不会设置文本值的状态，因为这个单独的类不扩展有状态小部件。 所以我的问题是，如何设置屏幕上文字的状态值？

编辑：这是显示功能的代码。当我按下按钮时，我需要更改内部文本的值

Widget productCard(String img_link, String title, String details, String price) {

int 数量Ordered = 0; 返回容器（

child: Column(
  children: <Widget>[
     Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[

        ClipRRect(
          borderRadius: BorderRadius.circular(50),
          child: Image( image: NetworkImage(img_link, ),
            height: 200,
            width: 200,
          ),
        ),
        Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(padding: EdgeInsets.only(left: 8, bottom: 5),child: Text(title, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),)),
              Container(
                  padding: EdgeInsets.only(left: 8, bottom: 5),
                  width:150,
                  child: Text(details, style: TextStyle(fontSize: 18), softWrap: true, overflow: TextOverflow.clip,)
              ),
              Container(padding: EdgeInsets.only(left: 8, bottom: 5),child: Text(price+"\$", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.red)))
            ]
        )
      ],
    ),
    // + / - Button
    Container(
      padding: EdgeInsets.only(bottom: 5),
      decoration: BoxDecoration(
        borderRadius:  BorderRadius.circular(10),
      ),
      width: 250,
      height: 35,
      child: Row(
        children: <Widget>[
          Expanded(
              child: RaisedButton(
                child: Text("-", style: TextStyle(fontSize: 20, color: Colors.white),),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.only( bottomLeft: Radius.circular(10),topLeft: Radius.circular(10) )),
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                color: Color.fromRGBO(45,182,169, 1),
                elevation: 1,
                onPressed: (){
                  quantityOrdered--;
                },
              )
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                color: Color.fromRGBO(45,182,169, 0.85),
                height: double.infinity,
                width: 50,
                child: Center(
                  child: Text(
                    "0",
                    style: TextStyle(
                        color: Colors.white,

                    ),
                    textAlign: TextAlign.center,

                  ),
                ),
              ),
            ],
          ),
          Expanded(
              child: RaisedButton(
                child: Text("+", style: TextStyle(fontSize: 20, color: Colors.white),),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.only( bottomRight: Radius.circular(10),topRight: Radius.circular(10) )),
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                color: Color.fromRGBO(45,182,169, 1),
                elevation: 1,
                onPressed: (){
                  quantityOrdered++;
                },
              )
          )
        ],
      ),
    ),
    // Order Button
    Container(
      width: 150,
      child: RaisedButton(
        child: Text("Add to cart", style: TextStyle(fontSize: 22, color: Colors.white),),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.only( bottomLeft: Radius.circular(10),topLeft: Radius.circular(10),
        bottomRight: Radius.circular(10), topRight: Radius.circular(10))),
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        color: Color.fromRGBO(45,182,169, 1),
        onPressed: (){},
      ),
    )
  ],
),

); }

Answer 1

如果我理解您所说的正确，您可以在 UI 中按下一个按钮并希望更新单独类中的变量。我建议查看各种状态管理技术。

在我看来，最简单的方法是使用Provider。

或者，您可以从您的 UI 中调用 ClassName.variableName = xyz，不过，在这种情况下，我建议您使用 setter 或方法为您设置它（这样您就可以将您的实例变量保密）。

PS 我自己也是 Flutter 菜鸟，所以我可能有点离谱 :) 祝你好运！

更新 =>

这是一个示例，其中我有一个 UI，它通过一个名为 myWidget() 的完全独立的类中的方法返回一个小部件树。在返回的小部件内部有一个FlatButton，它有一个onPressed，用于更新类中的值变量（value++;）。它还调用reload()，这是我从 UI 传递的。在类的变量 (value) 更新后，此重新加载方法在 UI 中调用 setState。这会调用 UI 重建，然后强制它从类中获取新值。我试过了，每次按下按钮都会更新按钮上的文本 (value)。代码如下：

用户界面：

import 'package:flutter/material.dart';
import 'logic.dart';

class Stack2 extends StatefulWidget {
  @override
  _Stack2State createState() => _Stack2State();
}

class _Stack2State extends State<Stack2> {
  Logic myLogic = Logic();

  void reload() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      body: myLogic.myWidget(reload),
    );
  }
}

逻辑类：

import 'package:flutter/material.dart';

class Logic {
  int value = 0;

  Center myWidget(Function reload) {
    return Center(
      child: FlatButton(
          onPressed: () {
            value++;
            reload();
          },
          child: Text(value.toString())),
    );
  }
}

如果这有帮助，请告诉我！