Flutter 可选择地在小部件树中包含/排除父小部件

Question

我有这个小部件树

return Container(
  color: Colors.blue,
  child: Container(
    child: Text("Child"),
  ),
);

有没有办法从树中删除父窗口小部件或有条件地包含它？

例如，如果 includeBlueContainer 等状态变量为 false，我不想渲染蓝色容器（但显示其他所有内容）。

Answer 1

我无法实现可选地包含可重用小部件，但我一直在使用这种模式，它确实实现了我想要实现的目标。 我没有考虑太多，但我仍然觉得某个地方有更好的解决方案。

class MyContainer extends StatelessWidget {
  final Widget child;
  final bool isIncluded;
  MyContainer({this.child, this.isIncluded = true});

  Widget build(BuildContext context) {
    if (!isIncluded) return child;

    return Container(
      color: Colors.blue,
      child: child,
    );
  }
}

Answer 2

编辑：我用这个做了一个包： https ://pub.dev/packages/conditional_parent_widget

您可以像这样使用：

import 'package:flutter/widgets.dart';
import 'package:conditional_parent_widget/conditional_parent_widget.dart';

// ...

return ConditionalParentWidget(
  condition: includeBlueContainer,
  child: Text("Child"),
  parentBuilder: (Widget child) => Container(
    color: Colors.blue,
    child: child,
  ),
);

在内部它只是：

import 'package:flutter/widgets.dart';

class ConditionalParentWidget extends StatelessWidget {
  const ConditionalParentWidget({
    Key? key,
    required this.condition,
    required this.child,
    required this.parentBuilder,
  }) : super(key: key);

  final Widget child;
  final bool condition;
  final Widget Function(Widget child) parentBuilder;

  @override
  Widget build(BuildContext context) {
    return condition ? this.parentBuilder(this.child) : this.child;
  }
}

Answer 3

我有这个小部件树

return Container(
  color: Colors.blue,
  child: Container(
    child: Text("Child"),
  ),
);

有没有办法从树中删除父窗口小部件或有条件地包括它？

例如，如果诸如includeBlueContainer之类的状态变量为false，则我不希望渲染蓝色容器（而是显示其他所有内容）。