flutter - 如何将此硬编码的小部件变成具有适当功能参数的可重用和模块化小部件？

Question

我对如何解决这个问题感到非常困惑，甚至认为我没有正确的术语。我缺乏这种基本的 Flutter 知识。

我想让这个页面小部件模块化，这样它就可以在很多地方使用，只需要一个函数参数。至少我认为那是我需要的。我希望能够将一个函数传递给这个可重用的自定义小部件，该小部件带有用于构建的索引，以及索引，直到 indexCount。索引计数将传递给条子列表小部件中的子计数。这样传递的小部件将使用来自 sliver 构建器的索引参数进行构建。

/// WHAT I CURRENTLY HAVE

class PageOne extends StatelessWidget {
  final int indexCount;
  Widget sliverItem({required Widget child, required int index}) {
    return child;
  }
  const PageOne({Key? key, required indexCount}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          const SizedBox(width: 40.0),
          Consumer(builder: (context, ref, child) {
            return Expanded(
              child: EasyRefresh.custom(
                onRefresh: // TODO
                onLoad: // TODO
                slivers: [
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return Card(
                          margin: const EdgeInsets.all(15),
                          child: Container(
                            color: Colors.blue[100 * (index % 9 + 1)],
                            height: 80,
                            alignment: Alignment.center,
                            child: const Text(
                              'item $index',
                              style: TextStyle(fontSize: 30),
                            ),
                          ),
                        );
                      },
                      childCount: indexCount,
                    ),
                  ),
                ],
              ),
            );
          }),
        ],
      ),
    );
  }
}

/// WHAT I THINK I NEED

class PageOne extends StatelessWidget {
final int indexCount;
  Widget sliverItem({required Widget child, required int index}) {
    return child;
  }
  const PageOne({Key? key, required indexCount}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          const SizedBox(width: 40.0),
          Consumer(builder: (context, ref, child) {
            return Expanded(
              child: EasyRefresh.custom(
                onRefresh: // TODO
                onLoad: // TODO
                slivers: [
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return sliverItem(index) // returns custom widget with index until indexCount
                      },
                      childCount: indexCount,
                    ),
                  ),
                ],
              ),
            );
          }),
        ],
      ),
    );
  }
}

Answer 1

与您声明的方式相同final int indexCount;，您可以将函数声明为final Function() myFunction;并调用所需的myFunction位置。