Flutter：滚动到长表单验证失败的表单字段

Question

我的应用程序中有一个表单，其长度足以超出屏幕，并放入 ListView 中以启用滚动。 我的验证器工作正常。虽然如果验证失败的表单字段超出了屏幕，我需要将屏幕滚动到验证失败的表单字段。

我怎样才能做到这一点？

Answer 1

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'),
            ),
          ],
        ),
      ),
    );
  }
}