如何在 Chartbar 中获取 day 而不是简单的文本值。 - 颤振

Posted 2023-02-23

【中文标题】如何在 Chartbar 中获取 day 而不是简单的文本值。 - 颤振

【英文标题】：How can I get day instead of simple text value in Chartbar. - Flutter

【发布时间】：2022-01-17 04:41:41

【问题描述】：

我正在尝试在文本小部件中度过一天，但它不起作用并显示简单的文本小部件字符串。但在控制台日是表演。 从这里过去一天。

 List<Map<String, Object>> get groupedTransactionValues 
        return List.generate(7, (index) 
          final weekDay = DateTime.now().subtract(
            Duration(days: index),
          );
    
          var totalSum = 0.0;
          for (var i = 0; i < recentTransactions.length; i++) 
            if (recentTransactions[i].date.day == weekDay.day &&
                recentTransactions[i].date.month == weekDay.month &&
                recentTransactions[i].date.year == weekDay.year) 
              totalSum += recentTransactions[i].amount;
            
          
          return 
            'day': DateFormat.E().format(weekDay).substring(0, 3),
            "amount": totalSum,
          ;
        );
      

问题就在这里。

 children: groupedTransactionValues.map((data) 
              return ChartBars(
                data['day'] as String ,
                data['amount'] as double,
                totalSpending == 0.0
                    ? 0.0
                    : (data['amount'] as double) / totalSpending,
              );
            ).toList()

控制台输出： I/flutter (28610): [day: Mon, amount: 0.0, day: Sun, amount: 0.0, day: Sat, amount: 0.0, day: Fri, amount: 0.0, day : Thu, amount:0.0, day: Wed, amount: 0.0, day: Tue, amount:0.0]

这是完整的代码

 import 'package:flutter/material.dart';
    import 'package:intl/intl.dart';
    
    import '../models/transaction.dart';
    import './chart_bar.dart';
    
    class Chart extends StatelessWidget 
      final List<Transation> recentTransactions;
    
      Chart(this.recentTransactions);
    
      List<Map<String, Object>> get groupedTransactionValues 
        return List.generate(7, (index) 
          final weekDay = DateTime.now().subtract(
            Duration(days: index),
          );
    
          var totalSum = 0.0;
          for (var i = 0; i < recentTransactions.length; i++) 
            if (recentTransactions[i].date.day == weekDay.day &&
                recentTransactions[i].date.month == weekDay.month &&
                recentTransactions[i].date.year == weekDay.year) 
              totalSum += recentTransactions[i].amount;
            
          
          return 
            'day': DateFormat.E().format(weekDay).substring(0, 3),
            "amount": totalSum,
          ;
        );
      
    
      double get totalSpending 
        return groupedTransactionValues.fold(0.0, (sum, element) 
          return sum + (element['amount'] as double);
        );
      
    
      @override
      Widget build(BuildContext context) 
        print(groupedTransactionValues);
        return Card(
          elevation: 6,
          margin: EdgeInsets.all(20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: groupedTransactionValues.map((data) 
              return ChartBars(
                data['day'] as String ,
                data['amount'] as double,
                totalSpending == 0.0
                    ? 0.0
                    : (data['amount'] as double) / totalSpending,
              );
            ).toList(),
          ),
        );
      
    

**Here is char_bar.dart file.**
import 'package:flutter/material.dart';

class ChartBars extends StatelessWidget 
  final String label;
  final double spendingAmount;
  final double spendingPctOfTotal;

  ChartBars(this.label, this.spendingAmount, this.spendingPctOfTotal);

  @override
  Widget build(BuildContext context) 
    return Column(
      children: [
        Text("\$$spendingAmount.toStringAsFixed(0)"),
        SizedBox(height: 4),
        Container(
            height: 60,
            width: 10,
            child: Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.green,
                      width: 1.0,
                    ),
                    color: Color.fromRGBO(220, 220, 220, 1),
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                FractionallySizedBox(
                  heightFactor: spendingPctOfTotal,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.brown[300]),
                  ),
                ),
              ],
            )),
        SizedBox(height: 4),
        Text("day")
      ],
    );
  

【参考方案1】：

如果我没看错，你想在 Text 小部件中显示你的 var label。

您目前正在向其发送String 或"day"

尝试将您的 Text 小部件调用更改为 Text(label)

这应该会给你想要的效果