Flutter ValueListenableBuilder 结果更新状态以显示/隐藏小部件

时间:2021-04-01 01:24:45

标签: flutter dart visibility

我正在尝试使用我的 ValueListenableBuilder(它生成是/否按钮)来确定文本表单字段是否可见。 IE。用户选择“是”按钮,应用程序的状态将更改以允许显示隐藏的文本表单字段。我对如何使用 setState、NotifyListeners 或 ChangeNotifier 来完成此任务感到非常困惑。

我试图避免使用单选按钮或在 ValueListenableBuilder 之外制作按钮,因为我的 ValueListenableBuilder 旨在生成许多其他按钮,我希望将更多功能合并到它们中。提前致谢!

ValueListenableBuilder

ValueListenableBuilder<Option>(
                  valueListenable: yesNo,
                  builder: (context, option, _) => MakeButtons(
                    num0: 0,
                    num1: 1,
                    makeButtonWidth: MediaQuery.of(context).size.width * 0.20,
                    selected: option,
                    onChanged: (newOption) => 
                        yesNo.option = newOption,                                                
                    ifSelected: (newOption) {
                      setState(() {
                        yesNo.option = newOption;
                        yesNo;
                      });
                    },
                  ),
                ), 

制作按钮

enum Option {
  option0,
  option1,
}

class MakeButtons extends StatefulWidget {
  MakeButtons({
    this.num0,
    this.num1,
    this.selected,
    this.onChanged,
    this.ifSelected,
    this.makeButtonWidth,
  });
  final int num0;
  final int num1;
  final double makeButtonWidth;
  final Option selected;
  final Function ifSelected;
  final ValueChanged<Option> onChanged;

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

class _MakeButtonsState extends State<MakeButtons> {
  List<Widget> makeButtons(int num0, int num1, List<Widget> children,
      List<Color> colors, List<Function> onPresses) {
    List<Widget> buttons = new List();
    for (int i = num0; i < num1; i++) {
      buttons.add(Container(
        constraints: BoxConstraints(
          minWidth: widget.makeButtonWidth,
        ),
        child: RectButton(
            buttonChild: children[i],
            bgColor: colors[i],
            onPress: onPresses[i]),
      ));
    }
    return buttons;
  }

  Option selectedOption;

  @override
  Widget build(BuildContext context) {
    List<Widget> children = [
  AutoSizeText(
        'Yes',
        textAlign: TextAlign.center,
        style: TextStyle(fontWeight: FontWeight.w600, color: Colors.white),
      ),
      AutoSizeText(
        'No',
        textAlign: TextAlign.center,
        style: TextStyle(fontWeight: FontWeight.w600, color: Colors.white),
      ),
    ];

List<Color> colors = [
      selectedOption == Option.option0
          ? kActiveButtonColor
          : kInactiveButtonColor,
selectedOption == Option.option1
          ? kActiveButtonColor
          : kInactiveButtonColor,
];
List<Function> onPresses = [
      () {
        setState(() {
          selectedOption = Option.option0;
        });
        return widget.onChanged(Option.option0);
      },
      () {
        setState(() {
          selectedOption = Option.option1;
        });
        return widget.onChanged(Option.option1);
      },

return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:
          makeButtons(widget.num0, widget.num1, children, colors, onPresses),
    );
  }
}

可见性

visible: yesNo.title == 'A' ||
                yesNo == 'Yes',
            child: InputRow(
              myUnit: defaultUnit,
              inputParameter: 'Units',
              textField: unitController,
              colour: kEmoryDBlue,
            ),
          ),

0 个答案:

没有答案