在 Flutter 中将一个 Widget 作为参数传递给另一个 Widget 时，使用 `Widget` 或 `WidgetBuilder` 有区别吗？

Question

class MyWidget {
  final Widget? leading;
  final WidgetBuilder? trailing;

  Widget build(BuildContext context) {
    return Row(
      children: [
        if(leading != null ) leading,
        AnotherWidget(),
        if(trailing != null) trailing(context),
      ],
    );
}

使用 WidgetBuilder 而不是 Widget 进行尾随有什么优点/缺点吗？

Answer 1

使用小部件：

class MyWidget extends StatelessWidget {
  final Widget? leading;
  final Widget? trailing;

  MyWidget({this.leading, this.trailing});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        if (leading != null) leading!,
        Text('Content'),
        if (trailing != null) trailing!,
      ],
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: MyWidget(
        leading: Icon(Icons.arrow_back),
        trailing: Icon(Icons.search),
      ),
    ),
  ));
}

在此，尾随直接获取一个 Widget。当小部件已经实例化并准备使用时，它非常简单且适合。

使用WidgetBuilder：

class MyWidget extends StatelessWidget {
  final Widget? leading;
  final WidgetBuilder? trailingBuilder;

  MyWidget({this.leading, this.trailingBuilder});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        if (leading != null) leading!,
        Text('Content'),
        if (trailingBuilder != null) trailingBuilder!(context),
      ],
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: MyWidget(
        leading: Icon(Icons.arrow_back),
        trailingBuilder: (context) => IconButton(
          icon: Icon(Icons.search),
          onPressed: () {
            // Search action
          },
        ),
      ),
    ),
  ));
}

在这个 TrailingBuilder 中是一个 WidgetBuilder 函数。它允许更动态的行为，因为可以基于 BuildContext 构造尾随小部件，从而实现基于上下文或运行时条件的自定义。