如何在 flutter 中使用 provider 或 valuenotifier 将数据从子小部件传递到父小部件

Question

这是我的父控件。

class AddUserextends StatefulWidget {
  final ScrollController controller;
  AddUser(this.controller);

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

class _AddUserToManagePropertyState extends State<AddUserToManageProperty> {
  late TextEditingController _firstNameCtrl;
  late TextEditingController _lastNameCtrl;
  late TextEditingController _phoneNoCtrl;
  late ValueNotifier<num?> _category;


  final _scaffoldKey = GlobalKey<ScaffoldState>();
  final _formKey = GlobalKey<FormState>();

  final ValueNotifier<bool> _formStateEmitter = ValueNotifier(false);
  final ValueNotifier<bool> isSelected = ValueNotifier(false);

  @override
  void initState() {
    super.initState();
    _firstNameCtrl = TextEditingController(text: '');
    _lastNameCtrl = TextEditingController(text: '');
    _phoneNoCtrl = TextEditingController(text: '');

    _firstNameCtrl.addListener(() {
      _formStateEmitter.value = _fieldsStatus();
    });
    _lastNameCtrl.addListener(() {
      _formStateEmitter.value = _fieldsStatus();
    });
    _phoneNoCtrl.addListener(() {
      _formStateEmitter.value = _fieldsStatus();
    });

  }

  bool _fieldsStatus() {
    return HwValidators.required(_firstNameCtrl.text) == null &&
        HwValidators.required(_lastNameCtrl.text) == null &&
        HwValidators.required(_phoneNoCtrl.text) == null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: HwAppBar(
        title: 'Add team member',
      ),
      body: Form(
        key: _formKey,
        child: FormWidget(
          maintainSafeArea: false,
          showBackBtn: false,
          fields: [
            HwTextField(
              label: 'FIRST NAME',
              controller: _firstNameCtrl,
              validator: HwValidators.nameValidator,
              keyboardType: TextInputType.text,
            ),
            HwSizedBox(height: 4),
            HwTextField(
              label: 'LAST NAME',
              controller: _lastNameCtrl,
              validator: HwValidators.nameValidator,
              keyboardType: TextInputType.text,
            ),
            HwSizedBox(height: 4),
            HwTextField(
              label: 'PHONE NO',
              controller: _phoneNoCtrl,
              validator: HwValidators.phoneValidator,
              keyboardType: TextInputType.phone,
            ),
            HwSizedBox(height: 4),
            HwSizedBox(height: 4),
            HwText('ACCESS LEVEL'),
            UserAccessListTiles(),
            HwSizedBox(
              height: 4,
            ),
          ],
        ),
      ),
    );
  }
}

倒数第二个小部件是 UserAccessListTiles，它是一个允许用户从两组小部件中进行选择的小部件，如下所示：

class UserAccessListTiles extends StatelessWidget {
  List _userAccessListTile = [
    SelectableTile(
      title: 'Access to all stories',
      leading: SvgPicture.asset(HwSvgs.fullAccess),
      trailing: null,
    ),
    SelectableTile(
        title: 'Custom access',
        leading: SvgPicture.asset(HwSvgs.customAccess),
        trailing: null),
  ];

  final ValueNotifier<int> _selected = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
        valueListenable: _selected,
        builder: (context, int value, child) {
          return Column(
            children: [
              Container(
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: 2,
                  itemBuilder: (context, index) {
                    return Column(
                      children: [
                        HwSizedBox(
                          height: 3,
                        ),
                        InkWell(
                          onTap: () {
                            _selected.value = index;
                          },
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border.all(
                                  width: value == index ? 2 : 1,
                                  color: value == index
                                      ? HwColors.green
                                      : HwColors.divider,
                                ),
                                borderRadius: BorderRadius.circular(8.0)),
                            child: SelectableTile(
                              title: _userAccessListTile[index].title,
                              leading: _userAccessListTile[index].leading,
                              trailing: value == index
                                  ? SvgPicture.asset(HwSvgs.greenCheck)
                                  : null,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),
              _selected.value == 0 ? UserAccessListTilesRadio() : CustomAccess(),
            ],
          );
        });
  }
}

最后，这两个小部件 UserAccessListTilesRadio() 和 CustomAccess() 都有一组 RadioListTile 可供用户选择，我希望所选择的选项作为表单的一部分在原始父小部件中可用.

我该怎么做，请帮忙。

Answer 1

我建议您使用状态管理，即 Bloc 或 Provider

例如提供商制作一个 extends ChangeNotifierProvider

的模型

class MyProviderModel extends ChangeNotifierProvider{
int yourChosenValue;

 void updateChosenValue() {
   // Your logic
   notifyListeners();
 }
}

在您的父控件中初始化提供程序

Provider(
  create: (_) => MyProviderModel(),
  child: Consumer<MyProviderModel>(
   builder: (_, a, child) {
      return // Your Form
    },
 )
)

在您的子 Widget 中更新您的 MyProviderModel

context.read<MyProviderModel>().updateChosenValue();

在您的父 Widget 中初始化 Provider

如何在 flutter 中使用 provider 或 valuenotifier 将数据从子小部件传递到父小部件

How to pass data from child widget to parent widget using provider or valuenotifier in flutter

flutter

provider