flutter - 您将如何从这个小部件树创建一个独立的小部件？

Question

我有这个小部件树代表一个简单的数据选择器表单字段:

GestureDetector(
  onTap: () => _showDataPicker(context),
  child: AbsorbPointer(
    absorbing: true,
    child: TextFormField(
        controller: _controller,
        decoration: new InputDecoration(
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20)),
            suffixIcon: Icon(Icons.lock_open),
            icon: Icon(Icons.lock),
            hintText: "Password"),
        validator: (String value) {
          return null;
          if (value.isEmpty)
            return "Password can't be empty";
          else if (value.length < 8)
            return "Password must contain at least 8 chars";

          return null;
        }),
  ),
),

它只是一个被 AbsorbPointer 包围的文本表单字段，用于禁用其上的输入。从该代码我想创建一个自定义小部件，我可以将其插入小部件树的任何其他部分。像这样:

CustomFormDataPicker(
    validator: (value) {},
)

你会怎么做？您会从 FormField 继承吗(因为我希望它始终在表单中使用)。您是否会继承顶级组件 GestureDetector 并保留对 TextFormField 的引用(不知道这将如何与父表单一起使用)？

我有点迷茫。非常感谢任何帮助。

Answer 1

检查这段代码。如果您需要进一步的解释，请随时告诉我。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: CustomFormDataPicker(
        validator: (String value) {
          // return null;
          if (value.isEmpty)
            return "Password can't be empty";
          else if (value.length < 8)
            return "Password must contain at least 8 chars";

          return null;
        },
      ),
    );
  }

}

typedef ShowDataPickerCallback = void Function(BuildContext context);

class CustomFormDataPicker extends StatelessWidget {
  final String Function(String message) validator;
  final ShowDataPickerCallback showDataPicker;

  CustomFormDataPicker({this.validator, this.showDataPicker});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => showDataPicker != null ? showDataPicker(context) : null,
      child: AbsorbPointer(
        absorbing: true,
        child: TextFormField(
            controller: _controller,
            decoration: new InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20)),
                suffixIcon: Icon(Icons.lock_open),
                icon: Icon(Icons.lock),
                hintText: "Password"),
            validator: validator),
      ),
    );
  }
}