小部件对实时变化没有反应 - Flutter

发布于 2025-01-18 02:26:58 字数 5193 浏览 2 评论 0原文

在显示警报框时,我试图更改 saveButton 小部件的框阴影,它只是一个按钮。一旦填充 TextFormField,该按钮就会变为活动状态。但是,直到用户按下键盘上的 DoneSubmit 后,该按钮才会变为活动或非活动状态。下面是为了更好地理解的视频和供参考的代码。

class AddFacilityEquipmentWidget extends StatelessWidget {
  final AddFacilityProvider provider;

  AddFacilityyEquipmentWidget({this.provider});

  @override
  Widget build(BuildContext context) {
    return equipmentTypesColumn(context);
  }

  Widget equipmentTypesColumn(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(Translations.of(context).getEquipment),
        addCustomEquipmentButton(context),
      ],
    );
  }

  Widget addCustomEquipmentButton(BuildContext context) {
    return GestureDetector(
      onTap: () {
        showDialog(
          context: context,
          barrierDismissible: false,
          builder: (context) => addEquipmentAlertWidget(context),
        );
      },
      child: Text("Add Custom Equipment"),
    );
  }

  Widget addEquipmentAlertWidget(BuildContext context) {
    return AlertDialog(
      contentPadding: EdgeInsets.zero,
      content: Container(
        child: Column(
          children: <Widget>[
            upperTitleWidget(context),
            SizedBox(height: d_50),
            equipmentNameField(context),
            SizedBox(height: d_50),
            saveButton(context)
          ],
        ),
      ),
    );
  }

  Widget upperTitleWidget(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          Translations.of(context).getAddEquipment,
          style: d18fw700Black,
        ),
        Container(
          height: d_20,
          width: d_20,
          child: IconButton(
              padding: pd_0,
              icon: Icon(
                Icons.cancel,
                color: greyColor,
              ),
              onPressed: () {
                provider.isAddEquipmentButtonActive = false;
                provider.addNewEquipmentController.clear();

                Navigator.pop(context);
              }),
        )
      ],
    );
  }

  Widget equipmentNameField(BuildContext context) {
    return Container(
      child: TextFormField(
        controller: provider.addNewEquipmentController,
        keyboardType: TextInputType.text,
        onChanged: (text) {
          if (text.length > 0) {
            provider.isAddEquipmentButtonActive = true;
          } else {
            provider.isAddEquipmentButtonActive = false;
          }
        },
      ),
    );
  }

  Widget saveButton(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        decoration: BoxDecoration(
            boxShadow: [
              provider.isAddEquipmentButtonActive
                  ? BoxShadow() //Box Shadow 1
                  : BoxShadow(), // Box Shadow 2
            ],
            color: provider.isAddEquipmentButtonActive
                ? backgroundColor
                : deactivatButtonColor,
            borderRadius: BorderRadius.circular(d_100)),
        child: Text(
          Translations.of(context).getAddEquipment,
        ),
      ),
    );
  }
}

输入图片这里的描述

编辑:下面是 AddFacilityProvider 类的代码

class AddFacilityProvider extends ChangeNotifier {
  List<Facilities> _equipmentList = [
    Facilities(text: "Floodlights", key: "Floodlights", isOpen: false),
    Facilities(text: "Scoreboard", key: "Scoreboard", isOpen: false),
    Facilities(text: "Changing rooms", key: "Changing rooms", isOpen: false),
    Facilities(text: "Showers", key: "Showers", isOpen: false),
    Facilities(text: "Free parking", key: "Free parking", isOpen: false),
    Facilities(
        text: "Wheelchair friendly", key: "Wheelchair friendly", isOpen: false),
    Facilities(text: "Drinking water", key: "Drinking water", isOpen: false),
    Facilities(text: "Sports bar", key: "Sports bar", isOpen: false),
    Facilities(text: "Toilets", key: "Toilets", isOpen: false),
  ];
  TextEditingController _addNewEquipmentController =
      TextEditingController();
  bool _isEnableAddNewFacilityEquipment = false;
  bool _isAddEquipmentButtonActive = false;
  

  void toggleAddEquipmentActive(bool value) {
    _isAddEquipmentButtonActive = value;
    notifyListeners();
  }

  TextEditingController get addNewEquipmentController =>
      _addNewEquipmentController;

  set addNewEquipmentController(TextEditingController value) {
    _addNewEquipmentController = value;
    notifyListeners();
  }

  bool get isEnableAddNewFacilityEquipment => _isEnableAddNewFacilityEquipment;

  set isEnableAddNewFacilityEquipment(bool value) {
    _isEnableAddNewFacilityEquipment = value;
    notifyListeners();
  }

  bool get isAddEquipmentButtonActive => _isAddEquipmentButtonActive;

  set isAddEquipmentButtonActive(bool value) {
    _isAddEquipmentButtonActive = value;
    notifyListeners();
  }
}

While displaying an Alert box, i'm trying to change the Box Shadow of saveButton widget which is simply a button. The button is expected to become active as soon as the TextFormField is populated. But the button does not become active or inactive until the user presses Done or Submit on the keyboard. Below is the video for better understanding and the code for the reference.

class AddFacilityEquipmentWidget extends StatelessWidget {
  final AddFacilityProvider provider;

  AddFacilityyEquipmentWidget({this.provider});

  @override
  Widget build(BuildContext context) {
    return equipmentTypesColumn(context);
  }

  Widget equipmentTypesColumn(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(Translations.of(context).getEquipment),
        addCustomEquipmentButton(context),
      ],
    );
  }

  Widget addCustomEquipmentButton(BuildContext context) {
    return GestureDetector(
      onTap: () {
        showDialog(
          context: context,
          barrierDismissible: false,
          builder: (context) => addEquipmentAlertWidget(context),
        );
      },
      child: Text("Add Custom Equipment"),
    );
  }

  Widget addEquipmentAlertWidget(BuildContext context) {
    return AlertDialog(
      contentPadding: EdgeInsets.zero,
      content: Container(
        child: Column(
          children: <Widget>[
            upperTitleWidget(context),
            SizedBox(height: d_50),
            equipmentNameField(context),
            SizedBox(height: d_50),
            saveButton(context)
          ],
        ),
      ),
    );
  }

  Widget upperTitleWidget(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          Translations.of(context).getAddEquipment,
          style: d18fw700Black,
        ),
        Container(
          height: d_20,
          width: d_20,
          child: IconButton(
              padding: pd_0,
              icon: Icon(
                Icons.cancel,
                color: greyColor,
              ),
              onPressed: () {
                provider.isAddEquipmentButtonActive = false;
                provider.addNewEquipmentController.clear();

                Navigator.pop(context);
              }),
        )
      ],
    );
  }

  Widget equipmentNameField(BuildContext context) {
    return Container(
      child: TextFormField(
        controller: provider.addNewEquipmentController,
        keyboardType: TextInputType.text,
        onChanged: (text) {
          if (text.length > 0) {
            provider.isAddEquipmentButtonActive = true;
          } else {
            provider.isAddEquipmentButtonActive = false;
          }
        },
      ),
    );
  }

  Widget saveButton(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        decoration: BoxDecoration(
            boxShadow: [
              provider.isAddEquipmentButtonActive
                  ? BoxShadow() //Box Shadow 1
                  : BoxShadow(), // Box Shadow 2
            ],
            color: provider.isAddEquipmentButtonActive
                ? backgroundColor
                : deactivatButtonColor,
            borderRadius: BorderRadius.circular(d_100)),
        child: Text(
          Translations.of(context).getAddEquipment,
        ),
      ),
    );
  }
}

enter image description here

Edit: Below is the code of AddFacilityProvider class

class AddFacilityProvider extends ChangeNotifier {
  List<Facilities> _equipmentList = [
    Facilities(text: "Floodlights", key: "Floodlights", isOpen: false),
    Facilities(text: "Scoreboard", key: "Scoreboard", isOpen: false),
    Facilities(text: "Changing rooms", key: "Changing rooms", isOpen: false),
    Facilities(text: "Showers", key: "Showers", isOpen: false),
    Facilities(text: "Free parking", key: "Free parking", isOpen: false),
    Facilities(
        text: "Wheelchair friendly", key: "Wheelchair friendly", isOpen: false),
    Facilities(text: "Drinking water", key: "Drinking water", isOpen: false),
    Facilities(text: "Sports bar", key: "Sports bar", isOpen: false),
    Facilities(text: "Toilets", key: "Toilets", isOpen: false),
  ];
  TextEditingController _addNewEquipmentController =
      TextEditingController();
  bool _isEnableAddNewFacilityEquipment = false;
  bool _isAddEquipmentButtonActive = false;
  

  void toggleAddEquipmentActive(bool value) {
    _isAddEquipmentButtonActive = value;
    notifyListeners();
  }

  TextEditingController get addNewEquipmentController =>
      _addNewEquipmentController;

  set addNewEquipmentController(TextEditingController value) {
    _addNewEquipmentController = value;
    notifyListeners();
  }

  bool get isEnableAddNewFacilityEquipment => _isEnableAddNewFacilityEquipment;

  set isEnableAddNewFacilityEquipment(bool value) {
    _isEnableAddNewFacilityEquipment = value;
    notifyListeners();
  }

  bool get isAddEquipmentButtonActive => _isAddEquipmentButtonActive;

  set isAddEquipmentButtonActive(bool value) {
    _isAddEquipmentButtonActive = value;
    notifyListeners();
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文