Question

我有多个包含很多共享代码的小部件。我想知道如何利用可重用的小部件，以便我在不同屏幕之间更改的只是提供程序。

例如，假设我要显示两个列表页面。一种用于博客标题，另一种用于产品标题。它们都具有以下结构：

Class <BlogList/ProductList> extends Stateful Widget
  ...
  @override
  Widget build(BuildContext context) {
    // this is the only line that changes
    final myProvider = Provider.of<BlogModel/ProductModel>(context);
    final results = myProvider.search(_term);

    return Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8),
              // This search bar will supply `_term`
              child: SearchBar(
                controller: _controller,
                focusNode: _focusNode,
              ),
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: results.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: Container(
                      width: 300,
                      height: 100,
                      child: Text('${results[index].title}'),
                    )
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }

我可以通过为BlogList使用一个有状态的小部件，为ProductList使用一个有状态的小部件来完成这项工作。但是，这似乎违反了DRY原则。特别是当我有两个以上这样的屏幕时。唯一改变的是小部件正在使用的提供程序。

我想使用由BlogList / ProductList / ...子类化的通用小部件，我希望每个子类都能够使用自己的提供程序。

我该怎么做？

颤抖：相同的窗口小部件不同的提供程序，DRY

0 个答案: