Flutter实现点击数字切换两种计算结果的功能方案

核心逻辑很简单：通过一个状态变量标记当前显示的数值类型，点击时切换状态，再根据状态渲染对应计算逻辑得出的数值。以下是两种常见场景的实现代码：

原生JavaScript实现 #

<!-- HTML结构 -->
<h1 id="portfolioValue" class="large-title">0.00</h1>

// 模拟股票投资组合数据
const portfolio = [
  { ticker: 'AAPL', shares: 10, price: 175.5 },
  { ticker: 'MSFT', shares: 5, price: 380.2 }
];

// 计算逻辑1：总市值（持仓数量×当前价格之和）
function calculateTotalValue() {
  return portfolio.reduce((sum, item) => sum + (item.shares * item.price), 0).toFixed(2);
}

// 计算逻辑2：总收益（模拟成本价低于当前价的场景）
function calculateTotalProfit() {
  const costBasis = portfolio.reduce((sum, item) => sum + (item.shares * (item.price * 0.8)), 0);
  const currentValue = parseFloat(calculateTotalValue());
  return (currentValue - costBasis).toFixed(2);
}

// 状态变量：标记当前显示总市值（true）还是总收益（false）
let showingTotalValue = true;

// 获取DOM元素并初始化显示
const valueElement = document.getElementById('portfolioValue');
valueElement.textContent = calculateTotalValue();

// 添加点击切换事件
valueElement.addEventListener('click', () => {
  showingTotalValue = !showingTotalValue;
  valueElement.textContent = showingTotalValue ? calculateTotalValue() : calculateTotalProfit();
  // 可选：添加视觉反馈，比如切换颜色
  valueElement.style.color = showingTotalValue ? '#2ecc71' : '#e74c3c';
});

React函数组件实现 #

import { useState } from 'react';

// 模拟股票投资组合数据
const portfolio = [
  { ticker: 'AAPL', shares: 10, price: 175.5 },
  { ticker: 'MSFT', shares: 5, price: 380.2 }
];

function PortfolioHeader() {
  // 状态变量：控制显示的数值类型
  const [showTotalValue, setShowTotalValue] = useState(true);

  // 计算总市值
  const calculateTotalValue = () => {
    return portfolio.reduce((sum, item) => sum + (item.shares * item.price), 0).toFixed(2);
  };

  // 计算总收益
  const calculateTotalProfit = () => {
    const costBasis = portfolio.reduce((sum, item) => sum + (item.shares * (item.price * 0.8)), 0);
    const currentValue = parseFloat(calculateTotalValue());
    return (currentValue - costBasis).toFixed(2);
  };

  return (
    <h1
      className="large-title"
      onClick={() => setShowTotalValue(!showTotalValue)}
      style={{ cursor: 'pointer', color: showTotalValue ? '#2ecc71' : '#e74c3c' }}
    >
      {showTotalValue ? calculateTotalValue() : calculateTotalProfit()}
    </h1>
  );
}

export default PortfolioHeader;

关键要点 #

• 状态变量是核心：用来追踪当前显示的数值类型，点击时只需翻转状态即可
• 计算逻辑分离：把两种数值的计算封装成独立函数，后续扩展更多数值类型时只需新增函数和状态判断
• 视觉反馈：通过颜色、光标样式等让用户直观感知到点击可切换，提升交互体验

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