Flutter实现将Widget组件注入父组件并保留控制器与状态

需求说明 #

需要构建一个负责创建ScrollController的逻辑单元，让MyHeaderWidget、MyContentWidget、MyFooterWidget三个组件依赖该控制器。但不直接渲染包含这三个组件的整体，而是将它们分别放到ParentReceiver的指定布局位置，同时保持三个组件与同一ScrollController的关联——即可以在任意位置声明控制器的创建逻辑，将子组件分发到目标位置渲染，且保留原逻辑中的状态与控制器关联。

解决方案 #

我们可以将控制器的创建与子组件的生成逻辑封装为一个独立单元，再将生成的子组件传递给ParentReceiver进行布局，以下是具体实现：

1. 封装控制器与子组件生成逻辑

如果需要手动管理控制器生命周期，可使用普通类：

// 封装ScrollController创建与子组件生成的注入器
class ScrollControllerInjector {
  final ScrollController scrollController;

  ScrollControllerInjector() : scrollController = ScrollController();

  // 返回依赖控制器的Header组件
  Widget get header => MyHeaderWidget(scrollController: scrollController);
  // 返回依赖控制器的Content组件
  Widget get content => MyContentWidget(scrollController: scrollController);
  // 返回依赖控制器的Footer组件
  Widget get footer => MyFooterWidget(scrollController: scrollController);

  // 销毁控制器，避免内存泄漏
  void dispose() {
    scrollController.dispose();
  }
}

如果使用Flutter Hooks，可用HookWidget简化生命周期管理：

import 'package:flutter_hooks/flutter_hooks.dart';

// 基于Hook的控制器注入器
class ScrollControllerInjectorHook extends HookWidget {
  final Widget Function(ScrollController) builder;

  const ScrollControllerInjectorHook({super.key, required this.builder});

  @override
  Widget build(BuildContext context) {
    final scrollController = useScrollController();
    return builder(scrollController);
  }
}

2. 修改ParentReceiver接收子组件参数

让ParentReceiver接收三个子组件，负责将它们放到对应布局位置：

// 负责布局的父组件，接收子组件并放置到指定位置
class ParentReceiver extends StatelessWidget {
  final Widget header;
  final Widget content;
  final Widget footer;

  const ParentReceiver({
    super.key,
    required this.header,
    required this.content,
    required this.footer,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: header,
        ),
        content,
        Align(
          alignment: Alignment.bottomCenter,
          child: footer,
        ),
      ],
    );
  }
}

3. 注入器的使用方式

方式一：普通注入器（手动管理生命周期）

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

  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  late final ScrollControllerInjector _injector;

  @override
  void initState() {
    super.initState();
    _injector = ScrollControllerInjector();
  }

  @override
  void dispose() {
    _injector.dispose(); // 手动销毁控制器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ParentReceiver(
      header: _injector.header,
      content: _injector.content,
      footer: _injector.footer,
    );
  }
}

方式二：Hook注入器（自动管理生命周期）

class ParentPage extends HookWidget {
  const ParentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ScrollControllerInjectorHook(
      builder: (scrollController) {
        return ParentReceiver(
          header: MyHeaderWidget(scrollController: scrollController),
          content: MyContentWidget(scrollController: scrollController),
          footer: MyFooterWidget(scrollController: scrollController),
        );
      },
    );
  }
}

4. 原有子组件保持不变

class MyContentWidget extends StatelessWidget {
  const MyContentWidget({
    super.key,
    required this.scrollController,
  });

  final ScrollController scrollController;

  @override
  Widget build(BuildContext context) {
    return ListView(
      controller: scrollController,
      children: const [
        ListTile(title: Text('列表项1')),
        ListTile(title: Text('列表项2')),
        ListTile(title: Text('列表项3')),
      ],
    );
  }
}

// 示例Header组件
class MyHeaderWidget extends StatelessWidget {
  const MyHeaderWidget({super.key, required this.scrollController});

  final ScrollController scrollController;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue[100],
      padding: const EdgeInsets.all(16),
      child: const Text('顶部Header'),
    );
  }
}

// 示例Footer组件
class MyFooterWidget extends StatelessWidget {
  const MyFooterWidget({super.key, required this.scrollController});

  final ScrollController scrollController;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green[100],
      padding: const EdgeInsets.all(16),
      child: const Text('底部Footer'),
    );
  }
}

方案优势 #

• 三个子组件共享同一ScrollController，保持状态关联
• 控制器生命周期可被妥善管理，避免内存泄漏
• ParentReceiver仅负责布局，与控制器创建逻辑解耦
• 可在任意位置声明控制器注入逻辑，灵活分发子组件到目标位置

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