Flutter RefreshIndicator 刷新在单独文件上定义的小部件答案

【问题标题】：Flutter RefreshIndicator to refresh widget defined on separate fileFlutter RefreshIndicator 刷新在单独文件上定义的小部件
【发布时间】：2021-08-04 13:52:41
【问题描述】：

我的HomePage.dart 中有以下代码。

@override
  Widget build(BuildContext context) {
    size = Screen(MediaQuery.of(context).size);

    return Scaffold(
        backgroundColor: CustomColors.scaffoldBackgroundColor,
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                backgroundColor: CustomColors.scaffoldBackgroundColor,
                brightness: Brightness.light,
                expandedHeight: size.getSizePx(320),
                floating: false,
                title: _searchWidget(),
                titleSpacing: 0.0,
                elevation: 0,
                pinned: true,
                actions: <Widget>[
                  IconButton(
                      icon: Icon(
                        CustomIcons.settings,
                        color: Colors.black54,
                      ),
                      onPressed: () {}),
                ],
                flexibleSpace: Container(
                  child: FlexibleSpaceBar(
                    centerTitle: true,
                    background: Container(
                      padding: EdgeInsets.symmetric(
                        vertical: size.getSizePx(10),
                        horizontal: size.getSizePx(10),
                      ),
                      color: CustomColors.lightBlueBg,
                      child: Container(
                        margin: EdgeInsets.only(top: size.getSizePx(100)),
                        child: Text("TEST"),
                      ),
                    ),
                  ),
                ),
              ),
            ];
          },
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(
              vertical: size.getSizePx(10),
              horizontal: size.getSizePx(10),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                SizedBox(height: size.getSizePx(10)),
                NewItems(),             
                SizedBox(height: size.getSizePx(10)),
                PremiumItems(),
                SizedBox(height: size.getSizePx(10)),
                PopularItems(),
                SizedBox(height: size.getSizePx(40)),
              ],
            ),
          ),
        ));
  }

NewItems(),PremiumItems(),PopularItems() 是在三个独立文件中定义的三个小部件。基本上，这些小部件是用于产品展示的水平滚动项目。所有 API 和未来的调用都在各自的文件上进行。

问题

我想在HomePage.dart 上使用RefreshIndicator。因此，当下拉时，主页会用更新的内容刷新。如何使用 refreshindicator 更新这三个小部件？如果我将这三个小部件的所有代码都放在主页中会更容易。可以用我目前的设置吗？

谢谢

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以为每个小部件创建一个键，并可以访问 Statefull 小部件中的功能，这里是一个示例

final GlobalKey< PremiumItemsState> premiumItemsKey = GlobalKey();

Column(
children:[
...
PremiumItems(key:premiumItemsKey),
]
)


class PremiumItems extends StatefulWidget {
  const PremiumItems({Key key}) : super(key: key);

  @override
  PremiumItemsState createState() => PremiumItemsState();
}

class PremiumItemsState extends State<PremiumItems> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  void update() {
    setState(() {});
  }
}

这样您就可以访问PremiumItemsState 类中的update() 函数，并从主页调用premiumItemsKey.currentState.update()

【讨论】：