在颤振中验证期间在空字段中自动滚动

Question

我在 flutter 中创建了一个表单，在验证过程中（单击按钮时）我希望它向上滚动到空字段。我尝试了很多方法，包括 FocusNode，但因为有很多文本字段，所以它不起作用。我认为我的做法是错误的。有人可以帮忙吗？

Answer 1

为每个 TextFormField 创建一个不同的 focusNode，然后 当验证为 false 时，在节点上调用 requestFocus()。

首先是一些地方

final FocusNode d = FocusNode();

然后在 TextFormField Widegt 中

focusNode: d

然后在你的验证中

d.requestFocus();

并对每个文本字段重做，不要忘记检查验证器中的当前文本字段

Answer 2

import 'package:flutter/material.dart';

class TestForm extends StatefulWidget {
  const TestForm({super.key});

  @override
  State<TestForm> createState() => _TestFormState();
}

class _TestFormState extends State<TestForm> {
  final formKey = GlobalKey<FormState>();

  void validateForm() {
    final invalidFields = formKey.currentState?.validateGranularly();
    if (invalidFields != null && invalidFields.isNotEmpty) {
      Scrollable.ensureVisible(invalidFields.first.context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Form(
        key: formKey,
        child: Column(
          children: [
            const TextField(),
            const TextField(),
            const TextField(),
            OutlinedButton(
              onPressed: validateForm,
              child: const Text('Validate'),
            ),
          ],
        ),
      ),
    );
  }
}