Flutter中如何封装可复用的自定义AutoComplete组件减少重复代码

1. 封装自定义MyAutocomplete组件 #

将重复逻辑全部封装到组件内部，仅保留可变参数作为入项暴露：

import 'package:flutter/material.dart';

class MyAutocomplete extends StatelessWidget {
  // 下拉选项列表
  final List<String> options;
  // 输入框顶部label
  final String label;
  // 输入框提示文字
  final String hint;
  // 值变化回调，用于把当前输入/选择的值传给父组件
  final ValueChanged<String> onValueChanged;
  // 可选扩展参数：输入框圆角、前置图标
  final double cornerRadius;
  final Icon? prefixIcon;

  const MyAutocomplete({
    super.key,
    required this.options,
    required this.label,
    required this.hint,
    required this.onValueChanged,
    this.cornerRadius = 5.0,
    this.prefixIcon,
  });

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text.trim().isEmpty) {
          return const Iterable<String>.empty();
        }
        return options.where((String option) {
          return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
        });
      },
      fieldViewBuilder: (BuildContext context,
          TextEditingController textEditingController,
          FocusNode focusNode, VoidCallback onFieldSubmitted) {
        // 监听输入内容变化，实时回传给父组件
        textEditingController.addListener(() {
          onValueChanged(textEditingController.text);
        });
        return TextFormField(
          controller: textEditingController,
          decoration: myTextFieldDecoration(
            topLabel: label,
            hintText: hint,
            cornerRadius: cornerRadius,
            icon: prefixIcon,
          ),
          focusNode: focusNode,
          onFieldSubmitted: (String value) {
            onFieldSubmitted();
            onValueChanged(value);
          },
        );
      },
      onSelected: (String selection) {
        onValueChanged(selection);
      },
    );
  }

  // 复用你提供的通用输入装饰方法
  InputDecoration myTextFieldDecoration({
    String topLabel = "",
    String hintText = "",
    double cornerRadius = 5.0,
    Icon? icon,
  }) {
    return InputDecoration(
      labelText: topLabel,
      hintText: hintText,
      icon: icon,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(cornerRadius)),
      ),
    );
  }
}

2. 父页面调用示例 #

调用时通过回调将每个输入框的值存入专属变量，提交时直接读取变量写入ObjectBox即可：

import 'package:flutter/material.dart';

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

  @override
  State<AutoCompletePage> createState() => _AutoCompletePageState();
}

class _AutoCompletePageState extends State<AutoCompletePage> {
  // 定义专属变量存储每个Autocomplete的输入值
  String firstInputValue = '';
  String secondInputValue = '';
  // 定义各自的下拉选项列表
  final List<String> firstOptions = const ['aardvark', 'bobcat', 'chameleon'];
  final List<String> secondOptions = const ['apple', 'banana', 'cherry'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            MyAutocomplete(
              options: firstOptions,
              label: "First Input",
              hint: "Type or select from list",
              onValueChanged: (val) {
                firstInputValue = val;
              },
            ),
            const SizedBox(height: 10,),
            MyAutocomplete(
              options: secondOptions,
              label: "Another Input",
              hint: "Type or select from list",
              onValueChanged: (val) {
                secondInputValue = val;
              },
            ),
            const SizedBox(height: 30,),
            // 底部提交按钮
            ElevatedButton(
              onPressed: () {
                // 提交逻辑：直接把存储的变量写入ObjectBox即可
                debugPrint('第一个输入值：$firstInputValue，第二个输入值：$secondInputValue');
                // 此处补充你的ObjectBox写入逻辑
              },
              child: const Text('提交数据'),
            )
          ],
        ),
      ),
    );
  }
}

扩展说明 #

如果需要支持更多自定义能力，可直接在MyAutocomplete中增加对应参数，比如输入验证规则、输入格式限制、下拉框样式等，无需修改调用侧的基础逻辑。

内容的提问来源于stack exchange，提问作者ViKARLL