1

我创建了一个基于滑块的步进表单，使用TabBarView它在切换之前验证输入。它有效，但是当我返回时，状态已重置。当我尝试在选项卡末尾收集数据时，这种行为会导致我进入一个空表单。

我已经用谷歌搜索了几个小时，并尝试将当前切换GetView<MyController>到经典StatefulWidget with AutomaticKeepAliveMixin但没有运气，所以我恢复了它。

我有点卡住了，我想知道是否有其他方法可以实现这一点，如果可能的话，GetX 方式。

visual explanation

在此处输入图像描述`

create_account_form_slider.dart

class CreateAccountFormSlider extends GetView<CreateAccountController> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: TabBarView(
        physics: const NeverScrollableScrollPhysics(),
        controller: controller.tabController,
        children: [
          _buildEmailForm(),
          _buildNameForm(),
          _buildPasswordForm(),
        ],
      ),
    );
  }

  Widget _buildEmailForm() {
    return Form(
      key: controller.emailFormKey,
      child: Column(
        children: [
          Spacer(), // Necessary to push the input to the bottom constraint, Align class doesn't work.
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: FormInput(
              focusNode: controller.emailFocusNode,
              margin: EdgeInsets.zero,
              label: 'create_account_form_email'.tr,
              hintText: 'janedoe@example.com',
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.emailAddress,
              validator: controller.emailValidator,
              onFieldSubmitted: (_) => controller.next(),
            ),
          ),
        ],
      ),
    );
  }

... each form has similar structure (almost identical), so i will not include it here

create_account_controller.dart

class CreateAccountController extends GetxController
    with SingleGetTickerProviderMixin {

  final tabIndex = 0.obs;


  final emailFormKey = GlobalKey<FormState>();
  FormState get emailForm => emailFormKey.currentState;

  final emailFocusNode = FocusNode();
  final email = ''.obs;

  TabController tabController;

  @override
  void onInit() {
    _initTabController();
    super.onInit();
  }

  @override
  void onClose() {
    _disposeFocusNodes();
    _disposeTabController();
    super.onClose();
  }

  /// Initialize tab controller and add a listener.
  void _initTabController() {
    tabController = TabController(vsync: this, length: 3);
    tabController.addListener(_tabListener);
  }

  /// Listen on tab change and update `tabIndex`
  void _tabListener() => tabIndex(tabController.index);

  /// Dispose tab controller and remove its listener.
  void _disposeTabController() {
    tabController.removeListener(_tabListener);
    tabController.dispose();
  }

  /// Dispose all the focus nodes.
  void _disposeFocusNodes() {
    emailFocusNode.dispose();
  }


  /// Animate to the next slide.
  void _nextSlide() => tabController.animateTo(tabIndex() + 1);

  /// Animate to the next slide or submit if current tab is the last tab.
  void next() {
    if (tabIndex().isEqual(0) && emailForm.validate()) {
      _nextSlide();
      return focusScope.requestFocus(nameFocusNode);
    }
    ...
  }

  /// A function that checks the validity of the given value.
  ///
  /// When the email is empty, show required error message and when the email
  /// is invalid, show the invalid message.
  String emailValidator(String val) {
    if (val.isEmpty) return 'create_account_form_error_email_required'.tr;
    if (!val.isEmail) return 'create_account_form_error_email_invalid'.tr;
    return null;
  }

  /// Submit data to the server.
  void _submit() {
    print('TODO: implement submit');
    print(email());
  }
}
4

2 回答 2

0

如果你想像 StatefulWidget 一样在 GetX 中使用 AutomaticKeepAliveMixin。您可以像这样在 Get.put 中添加参数 'permanent: true'

Get.put<HomeController>(
  HomeController(),
  permanent: true,
);

像这样的 HomeBinding 完整代码

import 'package:get/get.dart';

import '../controllers/home_controller.dart';

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.put<HomeController>(
      HomeController(),
      permanent: true,
    );
  }
}
于 2022-03-03T15:52:22.747 回答
0

我通过保存表单并initialValue在我的自定义FormInput小部件上添加一个然后将 observable 变量放到每个相关的FormInput. 无需使用keepalive mixin。

create_account_controller.dart

  /// Animate to the next slide or submit if current tab is the last tab.
  void next() {
    if (tabIndex().isEqual(0) && emailForm.validate()) {
      // save the form so the value persisted into the .obs variable
      emailForm.save();
      
      // slide to next form
      _nextSlide();

      // TODO: wouldn't it be nice if we use autofocus since we only have one input each form?
      return focusScope.requestFocus(nameFocusNode);
    }

    ...
  }

create_account_form_slider.dart

Obx( // wrap the input inside an Obx to rebuild with the new value
  () => Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20.0),
    child: FormInput(
      focusNode: controller.emailFocusNode,
      label: 'create_account_form_email'.tr,
      hintText: 'janedoe@example.com',
      textInputAction: TextInputAction.next,
      keyboardType: TextInputType.emailAddress,
      validator: controller.emailValidator,
      onFieldSubmitted: (_) => controller.next(),
      initialValue: controller.email(), // use initial value to keep current value when user go back from the next slide
      onSaved: controller.email, // persist current value into the .obs variable
    ),
  ),
),

仅供参考：这FormInput只是一个常规的TextInput，只是decoration被修改了。这应该适用于常规颤振TextInput。

于 2021-01-10T07:18:02.717 回答