Flutter点击切换Container实现求助：三元表达式类型赋值错误

报错原因 #

你遇到的A value of type 'Row' can't be assigned to a variable of type 'bool'错误，是因为把Row组件直接赋值给了布尔类型的状态变量——比如误将isActive = Row(...)这种写法替代了用布尔变量判断返回UI的逻辑，导致类型不匹配。

正确实现步骤 #

要实现点击切换Container样式，需要用StatefulWidget管理状态，通过布尔变量标记样式状态，点击时切换状态并更新UI：

• 定义布尔状态变量，标记当前是「当前样式」还是「目标样式」
• 给Container绑定点击事件，点击时切换状态变量的值
• 在Container的装饰属性或子组件中，用三元表达式根据状态返回对应样式/组件

示例代码 #

class ToggleContainer extends StatefulWidget {
  const ToggleContainer({super.key});

  @override
  State<ToggleContainer> createState() => _ToggleContainerState();
}

class _ToggleContainerState extends State<ToggleContainer> {
  // false: 当前样式，true: 目标样式
  bool _isTargetStyle = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 点击切换状态
      onTap: () => setState(() => _isTargetStyle = !_isTargetStyle),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        // 根据状态切换背景、边框
        decoration: BoxDecoration(
          color: _isTargetStyle ? Colors.blue : Colors.grey[200],
          borderRadius: BorderRadius.circular(8),
          border: _isTargetStyle ? Border.all(color: Colors.blueAccent, width: 2) : null,
        ),
        // 根据状态切换内部子组件
        child: _isTargetStyle
            ? Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Text("已选中", style: TextStyle(color: Colors.white)),
                  Icon(Icons.check, color: Colors.white),
                ],
              )
            : Row(
                children: const [
                  Icon(Icons.radio_button_unchecked),
                  SizedBox(width: 8),
                  Text("未选中"),
                ],
              ),
      ),
    );
  }
}

关键注意点 #

• 三元表达式是用来返回不同的UI组件/属性值，比如child: _isTargetStyle ? 目标Row : 当前Row，而不是给布尔变量赋值
• 必须通过setState()更新状态，才能触发UI重绘切换样式

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