可重复使用的卡片小部件，带有颤动

Question

我正在尝试使用 Dart/Flutter 复制一个 Android 应用程序，我已经有一个用 PHP 和 Laravel 编写的网络版本。 它有多个具有相同组件的连续屏幕，例如应用栏、浮动按钮和用于显示每个屏幕内容的卡片。 使用刀片模板，是否可以执行以下操作：

<div class="card">
    @yeld('card_content')
</div>

并在其他视图中使用它：

@section('card_content')
    <div class="table">
        {{$data}}
    </div>
@endsection

我知道如何在要显示的小部件的构造函数中设置变量数据，但是如何调用卡片小部件并向其添加子小部件，就像在 Laravel 中一样？ 或者我应该在每个屏幕中复制卡代码？

Answer 1

您必须自己定义一个新的小部件，并在需要时重用新的小部件。 因此，只需创建一个新的 Widget 并在构建函数中返回带有您想要的设计的卡片。 例如：

class MyPersonalCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(color: Colors.red, child: Text('This is a reusable card'),);
  }
}

现在您可以使用 MyPersonalCard() 作为小部件，就像在您希望它们出现的地方使用 Card() 小部件一样。 如果您执行以下操作，您还可以使颜色仍然可自定义：

class MyPersonalCard extends StatelessWidget {
  final Color color;

  const MyPersonalCard({Key key, this.color = Colors.red}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(color: this.color, child: Text('This is a reusable card'),);
  }
}