Question

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

<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'),);
  }
}

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

1 个答案: