时间戳

首页 > 解决方案 > 图标作为“类别类型”作为表单输入不更新 UI 以显示用户选择

flutter - 图标作为“类别类型”作为表单输入不更新 UI 以显示用户选择

问题描述

我正在尝试将其添加到我的表单中。

在此处输入图像描述

这是添加药物，我有四种类型的药物：注射器，瓶子，药丸或药片。到目前为止，我已经完成了用 GestureDetector 包裹的图标行，以查看用户是否选择了一种类型，我的 inputVariable 正在更新但是，ui 没有改变..我不确定问题是什么..任何帮助将不胜感激谢谢！

这是我的代码：

// Code in Form
                Padding(
                  padding: EdgeInsets.only(top: 10.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      MedicineTypeColumn(
                          type: MedicineType.Bottle,
                          name: "Bottle",
                          icon: FontAwesomeIcons.prescriptionBottle,
                          isSelected: a == MedicineType.Bottle ? true : false),
                      MedicineTypeColumn(
                          type: MedicineType.Pill,
                          name: "Pill",
                          icon: FontAwesomeIcons.capsules,
                          isSelected: a == MedicineType.Pill ? true : false),
                      MedicineTypeColumn(
                          type: MedicineType.Syringe,
                          name: "Syringe",
                          icon: FontAwesomeIcons.syringe,
                          isSelected: a == MedicineType.Syringe ? true : false),
                      MedicineTypeColumn(
                          type: MedicineType.Tablet,
                          name: "Tablet",
                          icon: FontAwesomeIcons.ban,
                          isSelected: a == MedicineType.Tablet ? true : false),
                    ],
                  ),
                ),

// New Widget for MedicineTypes
class MedicineTypeColumn extends StatefulWidget {
  final MedicineType type;
  final String name;
  final IconData icon;
  final bool isSelected;

  MedicineTypeColumn(
      {Key key,
      @required this.type,
      @required this.name,
      @required this.icon,
      @required this.isSelected})
      : super(key: key);

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

class _MedicineTypeColumnState extends State<MedicineTypeColumn> {
  @override
  Widget build(BuildContext context) {
    List<Medicine> medTemp = Medicine.medList;

    return GestureDetector(
      onTap: () {
        setState(() {
          medTemp[0].medicineType = widget.type.toString();

          print(medTemp[0].medicineType);
          print(medTemp[0].medicineType.runtimeType);
        });
      },
      child: Column(
        children: <Widget>[
          Container(
            width: 85,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: widget.isSelected ? Colors.green : Colors.white,
            ),
            child: Center(
              child: Padding(
                padding: EdgeInsets.only(top: 14.0),
                child: Icon(
                  widget.icon,
                  size: 45,
                  color: widget.isSelected ? Colors.white : Color(0xFF3EB16F),
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 8.0),
            child: Container(
              width: 80,
              height: 30,
              decoration: BoxDecoration(
                color:
                    widget.isSelected ? Color(0xFF3EB16F) : Colors.transparent,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Center(
                child: Text(
                  widget.name,
                  style: TextStyle(
                    fontSize: 16,
                    color: widget.isSelected ? Colors.white : Color(0xFF3EB16F),
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

显示正在更新 inputVariable 的日志。

I/flutter ( 4614): MedicineType.Pill
I/flutter ( 4614): String

标签： flutterdart

解决方案

您的 GestureDetector 应该在 MedicineTypeColumn 之外。您可以制作 MedicineTypeColumn 无状态小部件并在您拥有表单的其他小部件中管理状态。在行的每个项目上添加手势检测器：

// Code in Form
GestureDetector(
  onTap: () {
    setState(() {
      a = MedicineType.Bottle;
    });
  },
  child: MedicineTypeColumn(
    type: MedicineType.Bottle,
    name: "Bottle",
    icon: FontAwesomeIcons.prescriptionBottle,
    isSelected: a == MedicineType.Bottle,
  ),
)

推荐阅读