Flutter中setState()仅触发一次问题排查及修复咨询

嘿，作为Flutter过来人，一眼就看到你踩了个经典的新手状态管理坑！咱们一步步来拆解问题：

问题核心：状态变量放错位置了 #

你把控制列表数量的listy定义在了build()方法里面！每次调用setState()时，Flutter都会重新执行build()方法，这行var listy = 0;会被反复执行，把listy重置回0——你在setState里加1让它变成1，但下一次build又打回原形，所以永远只能看到1个列表项。

为什么会这样？ #

Flutter的build()方法是会被频繁触发的：状态变化、屏幕旋转、父组件更新，甚至系统通知都可能让它重新执行。如果把需要持久化的状态变量放在build里，它就像个临时变量，每次build都会被重新初始化，根本存不住值。

真正需要跨多次build保留的状态，必须放在State类的成员变量位置——因为State对象的生命周期和组件绑定，会在组件整个存活期内保持，不会随build方法的执行而重置。

修复步骤 #

第一步：把listy移到类成员位置 #

只需要简单调整变量的定义位置：

class Comeback extends State<MyApp>{
  // 把listy移到这里，作为State类的成员变量
  int listy = 0;

  Widget hello(BuildContext context){
    // 原代码不变
    var listInsults = ['no you', 'but this applies to you more than me', 'that insult was horrible'];
    var finalVar = listInsults.toList()..shuffle();
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            CircleAvatar(
              child: Text( "XD" )
            ),
            Text( finalVar[0] )
          ]
        )
      ],
    );
  }

  Widget build(BuildContext context){
    // 删掉这里的var listy = 0;
    return MaterialApp(
      // 原代码不变
    );
  }
}

第二步：优化回怼内容的随机性（可选） #

现在虽然列表数量能正常递增，但你会发现所有列表项的内容都一样——因为hello方法每次都会重新shuffle列表并取第一个元素。如果想让每个回怼都不同，可以调整逻辑，提前打乱列表并循环使用：

class Comeback extends State<MyApp>{
  int listy = 0;
  // 把原列表改成类成员，避免重复创建
  final List<String> listInsults = ['no you', 'but this applies to you more than me', 'that insult was horrible'];
  List<String> shuffledInsults = [];

  @override
  void initState() {
    super.initState();
    // 初始化时先打乱一次列表
    shuffledInsults = List.from(listInsults)..shuffle();
  }

  // 给hello方法加index参数，用来取对应位置的回怼
  Widget hello(BuildContext context, int index){
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            const CircleAvatar(
              child: Text( "XD" )
            ),
            // 用取模实现循环使用打乱后的列表
            Text( shuffledInsults[index % shuffledInsults.length] )
          ]
        )
      ],
    );
  }

  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: const AppBar(
          title: Text( "hi" )
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                // 把index传给hello方法
                itemBuilder: (BuildContext context, int index) => hello(context, index),
                itemCount: listy
              ),
            ),
            Row(
              children: <Widget>[
                Expanded(
                  child: TextFormField(
                    decoration: const InputDecoration(
                      hintText: "Insult me plz!"
                    )
                  ),
                ),
                RaisedButton(
                  onPressed: () {
                    setState(() {
                      listy++;
                      // 如果列表项数量超过打乱后的长度，重新打乱一次
                      if(listy > shuffledInsults.length){
                        shuffledInsults = List.from(listInsults)..shuffle();
                      }
                      print(listy);
                    });
                  },
                  child: const Icon(Icons.add_circle_outline),
                  highlightColor: Colors.amber[600]),
              ],
            )
          ]
        )
      )
    );
  }
}

如何避免这类错误？ #

• 牢记状态变量的存放规则：需要跨多次setState保留的值，必须放在State类的成员位置；仅当前build临时使用的变量，才放在build方法里。
• 理解State与build的生命周期：State对象会跟着组件从创建到销毁一直存在，而build只是每次渲染UI的临时过程，不能用来存状态。
• 写代码前多思考：这个变量的值需要在UI更新后保持吗？如果是，就别往build里放！

内容的提问来源于stack exchange，提问作者Abhiraam Eranti