颤动下拉菜单在还款方式选择旁边显示损坏的图标（X框）

问题描述 投票：0回答：1

我正在 Flutter 中开发一个贷款计算器，除了一个小的 UI 问题之外，一切正常。用于选择还款方式的下拉按钮旁边有一个破损的“X-box”图标。我似乎无法修复或删除这个图标。

这是我用于下拉菜单的代码：

[this is the xbox](https://i.sstatic.net/jyhJo3yF.png)

（https://i.sstatic.net/cWPDnIWg.png）

DropdownButtonFormField<String>(
  value: _selectedRepaymentOption,
  decoration: const InputDecoration(?
    labelText: 'Repayment Method',
    border: OutlineInputBorder(),
  ),
  isExpanded: true,
  onChanged: (String? newValue) {
    setState(() {
      _selectedRepaymentOption = newValue!;
    });
  },
  items: _repaymentOptions.map((String option) {
    return DropdownMenuItem<String>(
      value: option,
      child: Text(option),
    );
  }).toList(),
),

还款方式：

同工同酬 延期等额付款 子弹支付 问题：下拉菜单有效，但旁边有一个图标，显示一个带有“X”的小框（如损坏的图像或占位符图标）。 Chrome 和 Android 上都会发生这种情况。

我尝试过的：

删除 const 关键字，以防它导致构造函数问题。 检查是否存在溢出或布局问题。 调整小部件的大小以确保它适合 UI。 尽管做出了这些努力，问题仍然存在。如何删除这个损坏的图标，或者可能是什么原因导致的？

这里是贷款计算器的完整代码：

import 'dart:math';
import 'package:flutter/material.dart';

class LoanCalculator extends StatefulWidget {
  const LoanCalculator({Key? key}) : super(key: key);

  @override
  LoanCalculatorState createState() => LoanCalculatorState();
}

class LoanCalculatorState extends State<LoanCalculator> {
  final TextEditingController principalController = TextEditingController();
  final TextEditingController interestRateController = TextEditingController();
  final TextEditingController yearsController = TextEditingController();
  final TextEditingController gracePeriodController = TextEditingController(); // Grace period                         input field

String _selectedRe paymentOption = '等额付款'; // 默认还款方式 字符串_结果 = '';

最终列表_re paymentOptions = [ “同等报酬”， “延期等额付款”， “子弹支付” ];

@覆盖 小部件构建（BuildContext上下文）{ 返回脚手架（ 应用栏：应用栏（ title: const Text('贷款计算器'), ), 主体：填充（ 填充：const EdgeInsets.all(16.0), 子项：列（ 孩子们： [ 文本字段（ 控制器：principalController， 装饰：const InputDecoration( labelText: '贷款金额（韩元）', ), 键盘类型：TextInputType.number， ), 常量 SizedBox（高度：20）， 文本字段（ 控制器：interestRateController， 装饰：const InputDecoration( labelText: '年利率(%)', ), 键盘类型：TextInputType.number， ), 常量 SizedBox（高度：20）， 文本字段（ 控制器：years控制器， 装饰：const InputDecoration( labelText: '贷款期限（年）', ), 键盘类型：TextInputType.number， ), 常量 SizedBox（高度：20）， 下拉按钮表单字段（ 值：_selectedRe paymentOption， 装饰：const InputDecoration( labelText: '还款方式', 边框：OutlineInputBorder(), ), 已扩展：正确， onChanged: (字符串? newValue) { 设置状态（（）{ _selectedRe paymentOption = newValue!; }); }, items: _re paymentOptions.map((字符串选项) { 返回下拉菜单项（ 值：选项， 孩子：文本（选项）， ）； }).toList(), ), const SizedBox（高度：20），

        // Show grace period input field when "Deferred Equal Payment" is selected
        if (_selectedRepaymentOption == 'Deferred Equal Payment') ...[
          TextField(
            controller: gracePeriodController,
            decoration: const InputDecoration(
              labelText: 'Grace Period (years)',
            ),
            keyboardType: TextInputType.number,
          ),
          const SizedBox(height: 20),
        ],

        ElevatedButton(
          onPressed: _calculateLoan,
          child: const Text('Calculate'),
        ),
        const SizedBox(height: 20),
        Text(
          _result,
          style: const TextStyle(fontSize: 18),
        ),
      ],
    ),
  ),
);

}

void _calculateLoan() { 双主体 = double.tryParse(principalController.text) ?? 0; 双年度利率 = double.tryParse(interestRateController.text) ?? 0 / 100； int 年 = int.tryParse(yearsController.text) ?? 0;

if (principal == 0 || annualInterestRate == 0 || years == 0) {
  setState(() {
    _result = 'Please enter valid values in all fields.';
  });
  return;
}

double result = 0;

    if (_selectedRepaymentOption == 'Equal Payment') {
      result = _equalPayment(principal, annualInterestRate, years);
    } else if (_selectedRepaymentOption == 'Deferred Equal Payment') {
      int gracePeriod = int.tryParse(gracePeriodController.text) ?? 0;
      result = _deferredEqualPayment(principal, annualInterestRate, years, gracePeriod);
    } else if (_selectedRepaymentOption == 'Bullet Payment') {
      result = _bulletPayment(principal, annualInterestRate, years);
    }

    setState(() {
      _result = 'Monthly Payment: ₩${result.toStringAsFixed(2)}';
    });
  }

  // Equal Payment calculation
  double _equalPayment(double principal, double annualInterestRate, int years) {
    double monthlyInterestRate = annualInterestRate / 12;
    int totalPayments = years * 12;
    return (principal * monthlyInterestRate) /
        (1 - pow(1 + monthlyInterestRate, -totalPayments));
  }

  // Deferred Equal Payment calculation
  double _deferredEqualPayment(
      double principal, double annualInterestRate, int years, int gracePeriod) {
    double monthlyInterestRate = annualInterestRate / 12;
    int totalPayments = (years - gracePeriod) * 12;
    return (principal * monthlyInterestRate) /
        (1 - pow(1 + monthlyInterestRate, -totalPayments));
  }

  // Bullet Payment calculation
  double _bulletPayment(
      double principal, double annualInterestRate, int years) {
    return principal * pow(1 + annualInterestRate, years);
  }
}
flutter dart
1个回答
0
投票

要解决此问题，您有两种选择：

1.在您的项目中启用材质图标

默认情况下，

DropdownButtonFormField
在该位置使用材质图标。为了确保图标正确显示，请确保项目的 
pubspec.yaml
文件中的 uses-material-design: true 部分下有 
flutter:
：

flutter:
  uses-material-design: true

这可确保材质图标包含在您的项目中。

2.设置自定义图标

如果您喜欢自定义图标，您可以为 

DropdownButtonFormField
指定您自己的图标。方法如下：

DropdownButtonFormField<String>(
  value: _selectedRepaymentOption,
  icon: MyCustomIcon(), // Set your custom icon here
  decoration: const InputDecoration(
    labelText: 'Repayment Method',
    border: OutlineInputBorder(),
  ),
  isExpanded: true,
  onChanged: (String? newValue) {
    setState(() {
      _selectedRepaymentOption = newValue!;
    });
  },
  items: _repaymentOptions.map((String option) {
    return DropdownMenuItem<String>(
      value: option,
      child: Text(option),
    );
  }).toList(),
)

无论采用哪种方法，您都可以消除损坏的“X-box”图标，并确保您的下拉菜单看起来符合预期。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.