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

我正在使用这个：

import 'package:flutter/widgets.dart';

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

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

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

您可以这样使用：

ConditionalParentWidget(
  condition: includeParent,
  child: someSubtree,
  // Build with the same subTree if the condition is true,
  // but wrap with container parent
  conditionalBuilder: (Widget someSubtree) => Container(child: someSubtree),
);

如果您想在项目中包含它，请使用以下注释版本：https://gist.github.com/ltOgt/3771c824fc1c8811f5ec1a81a9a4937b

Answer 3

return includeBlueContainer  ? blueWidget() : redWidget();

Widget blueWidget() {
return Container(
  color: Colors.blue,
  child: Container(
    child: Text("Child"),
  ),
)
}

Widget redWidget() {
return Container(
  color: Colors.red,
  child: Container(
    child: Text("Child"),
  ),
)
}

这是您想要的吗？

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

3 个答案: