为什么我的星系统不能正常工作

Question

这是我的代码，用于让星星始终变为黄色和灰色，但没有用。为什么？

Widget placeButton(BuildContext context, String name, String image, String id) {
      var color;
      var isClicked = true;
      return Column(children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(130.0, 0.0, 130.00, 0.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: SizedBox(
              height: 300,
              width: 400,
              child: GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, id);
                },
                child: Card(
                  child: ListTile(
                    title: Padding(
                      padding: const EdgeInsets.fromLTRB(20, 5, 20, 0),
                      child: Text(AppLocalizations.of(context)!.translate(name),
                          style: TextStyle(fontFamily: 'Manrope', fontSize: 18)),
                    ),
                    subtitle: Image.network(
                      image,
                      height: 250,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        Container(
          height: 40,
          width: 200,
          padding: EdgeInsets.only(top: 0),
          color: Colors.white,
          child: ListTile(
            leading: Text(
              "Rating:",
              style: TextStyle(fontFamily: 'Klasik'),
            ),
            trailing: IconButton(
              splashRadius: 20,
              icon: Icon(Icons.star_border_outlined, color: color),
              
              onPressed: () {
                if (isClicked) {
                  color = Colors.grey;
                  isClicked = !isClicked;
                } else {
                  color = Colors.yellow;
                  isClicked = !isClicked;
                }
              },
            ),
          ),
        ),
      ]);
    }

P/S：请随时向我询问有关以下代码的问题。我试过 setState 但它没有用。它 returns 错误如下：函数 'setState' 未定义。尝试导入定义 'setState' 的库，将名称更正为现有函数的名称，或定义一个名为 'setState'.

的函数

Answer 1

setState只在StatefulWidget范围内可用。您可能希望将 StatelessWidget 更改为有状态的。完成后，您需要在 build 方法或从 build 调用的任何其他方法（例如 placeButton 在这个例子中）。然后您可以调用 setState 并更改这些值。

这是一个简化的例子

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  // Define these outside of your build method
  Color color = Colors.grey;
  bool isClicked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: placeButton(context, 'name', 'image', 'id')),
    );
  }

  Widget placeButton(
    BuildContext context,
    String name,
    String image,
    String id,
  ) {
    // rest of your function...
    onPressed: () {
      // Use setState to change the values
      setState(() {
        if (isClicked) {
          color = Colors.grey;
          isClicked = !isClicked;
        } else {
          color = Colors.yellow;
          isClicked = !isClicked;
        }
      });
    },
  }
}

当使用 setState 时，Flutter 将再次运行 build 函数并注意到 color 和 isClicked 的值已更改并使用这些新的更新 UI.

的值

为什么我的星系统不能正常工作

Why is my star system isnt work in flutter

setstate

dart

flutter