带有颤振的可重复使用的卡片小部件答案

【问题标题】：Reusable card widget with flutter带有颤振的可重复使用的卡片小部件
【发布时间】：2020-04-12 02:26:52
【问题描述】：

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

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

并在其他视图中使用它：

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

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

【问题讨论】：

您能否展示您在 Flutter 中尝试过的内容，因为这与问题相关？

标签： flutter dart widget

【解决方案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'),);
  }
}

【讨论】：

我会接受你的回答，因为让我思考。我试图让一个类返回一张卡片，其中一个容器作为子级，一个列作为容器的子级。它们都必须是单独的类，具有我要修改的属性，并在屏幕中调用。