Flutter中ElevatedButton无法更新对应变量的问题求解

1. 调整变量作用域 #

把skillvalue从build方法内部移到_SkillEntryState类中作为成员变量——如果变量定义在build里，每次组件重构都会重置为0，根本无法保存状态。

2. 修正按钮点击回调 #

原来的onPressed: PlusOne(skillvalue)会在组件初始化时直接执行方法，而非点击按钮时触发。需要传递匿名函数，确保点击才调用方法：

• onPressed: () => PlusOne()
• onPressed: () => MinusOne()

3. 修改增减方法逻辑 #

增减方法不需要接收参数，直接操作类成员变量skillvalue即可，setState会触发组件重构更新UI。

修正后的完整代码 #

import 'package:flutter/material.dart';

class SkillEntry extends StatefulWidget {
  const SkillEntry({super.key, required this.skll});

  final String skll;

  @override
  State<SkillEntry> createState() => _SkillEntryState();
}

class _SkillEntryState extends State<SkillEntry> {
  // 成员变量保存状态，不会随build重置
  int skillvalue = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      width: 200,
      child: Row(children: [
        const Flexible(
          flex: 20,
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: ('Name and Skill'),
            ),
          ),
        ),
        ElevatedButton(
          onPressed: () => PlusOne(),
          child: const Icon(Icons.add_circle),
        ),
        ElevatedButton(
          onPressed: () => MinusOne(),
          child: const Icon(Icons.exposure_minus_1),
        ),
        Flexible(
          flex: 7,
          child: Text('$skillvalue'),
        ),
      ]),
    );
  }

  void PlusOne() {
    setState(() {
      skillvalue += 1;
    });
  }

  void MinusOne() {
    setState(() {
      skillvalue -= 1;
    });
  }
}

额外优化建议 #

• 遵循Dart命名规范，方法名改用小驼峰：plusOne、minusOne
• 可以给数值加边界限制，比如防止减到负数：

  void minusOne() {
    setState(() {
      if (skillvalue > 0) {
        skillvalue -= 1;
      }
    });
  }
  

内容的提问来源于stack exchange，提问作者David Asher