Flutter状态未实时更新：支付选择界面UI不刷新问题求助

问题描述 #

我开发了一个支付方式选择界面，通过Column布局展示三种支付方式的图片，需求是点击某张图片时，该图片保持高透明度，其他图片降低透明度。目前遇到的问题是：点击图片后，_value变量确实已经变化，但UI不会实时更新，必须手动热重载才能看到效果，请问如何实现UI实时刷新？

原代码 #

class _PaymentScreenState extends State<PaymentScreen> {
  int _value = 2;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("الدفع"),
        centerTitle: true,
        leading: GestureDetector(
          child: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: Column(
          children: [
            GestureDetector(
              onTap: () => setState(() {
                _value = 1;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage("assets/zainCashLogo.png"),
                  opacity: _value == 1
                      ? AlwaysStoppedAnimation(.9)
                      : AlwaysStoppedAnimation(.1),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => setState(() {
                _value = 2;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage("assets/OrangeMoneyLogo.png"),
                  opacity: _value == 2
                      ? AlwaysStoppedAnimation(.9)
                      : AlwaysStoppedAnimation(.1),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => setState(() {
                _value = 3;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage("assets/UWalletLogo.jpg"),
                  opacity: _value == 3
                      ? AlwaysStoppedAnimation(.9)
                      : AlwaysStoppedAnimation(.1),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解决方案 #

问题根源在于你给Image组件的opacity参数传入了AlwaysStoppedAnimation，这个对象是静态的，一旦创建就不会响应状态变化。你可以改用Opacity组件包裹Image，它能在setState触发组件重建时，实时根据新的透明度值更新UI。

修改后的代码如下：

class _PaymentScreenState extends State<PaymentScreen> {
  int _value = 2;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("الدفع"),
        centerTitle: true,
        leading: GestureDetector(
          child: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: Column(
          children: [
            GestureDetector(
              onTap: () => setState(() {
                _value = 1;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Opacity(
                  opacity: _value == 1 ? 0.9 : 0.1,
                  child: Image(image: AssetImage("assets/zainCashLogo.png")),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => setState(() {
                _value = 2;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Opacity(
                  opacity: _value == 2 ? 0.9 : 0.1,
                  child: Image(image: AssetImage("assets/OrangeMoneyLogo.png")),
                ),
              ),
            ),
            GestureDetector(
              onTap: () => setState(() {
                _value = 3;
              }),
              child: Container(
                height: 200,
                width: 200,
                child: Opacity(
                  opacity: _value == 3 ? 0.9 : 0.1,
                  child: Image(image: AssetImage("assets/UWalletLogo.jpg")),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

说明 #

Opacity是Flutter官方提供的专门用于控制子组件透明度的Widget，它会在组件重建时（调用setState后）重新计算并应用透明度值，从而实现UI的实时更新。而Image的opacity参数主要用于配合动画控制器实现动态透明度变化，静态场景下使用Opacity组件更合适。

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