用另一个小部件替换小部件的子部件/可选地包装小部件

Question

是否可以"合并"；两个小部件在一起？我想构建一个OptionalWrapper组件，只有在条件匹配的情况下，该组件才会用另一个小部件包装小部件。

用法应该是这样的，我提供了一个子项，如果showWrapper条件为true，则将该子项作为包装小部件的子项。

OptionalWrapper(
showWrapper: !isSmallScreen(context),
wrapper: Padding(
padding: const EdgeInsets.only(top: 16.0),
child: // <-- Here should the child be rendered
),
child: Text("Hello"),
),

我当然可以这样做：

!isSmallScreen(context) ? Padding(
padding: const EdgeInsets.all(16.0),
child: Text("Hello"),
) : Text("Hello"),

但在这里，我声明了两次我想要避免的文本小部件。

实现方式如下：

import 'package:flutter/material.dart';
class OptionalWrapper extends StatelessWidget {
final bool showWrapper;
final Widget wrapper;
final Widget child;
const OptionalWrapper({
Key? key,
required this.showWrapper,
required this.wrapper,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (showWrapper) {
// return the wrapper widget but subject child as child of the wrapper widget
} else {
return child;
}
}
}

Answer 1

您可以创建类似的构建器方法

import 'package:flutter/material.dart';
class OptionalWrapper extends StatelessWidget {
final bool showWrapper;
final Widget Function(Widget) wrapper;
final Widget child;
const OptionalWrapper({
Key? key,
required this.showWrapper,
required this.wrapper,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (showWrapper) {
return wrapper(child);
} else {
return child;
}
}
}

Answer 2

如果条件未通过，则可以将填充设置为EdgeInsects.zero

Padding(
padding: !isSmallScreen(context)?const EdgeInsets.all(16.0): EdgeInsects.zero,
child: Text("Hello"),