首页 > 解决方案 > Flutter 未来的小部件没有更新屏幕吗?我需要在更新数据时更新数据

问题描述

我有一个数组,我将其设置为这样的类

class FilterArray {
  static var FilterArrayData = [];
}

我只是在数组中添加值。问题是当数组为空时我在页面中调用此数组。然后在下一页我在数组中添加值。现在的问题是当我回到上一页时,数组仍然为空。我需要为此刷新页面。我不希望这就是为什么我使用 FutureWidget 我虽然来自 Future 小部件,当数组更新时它也会在我的屏幕上更新,但那不起作用。需要知道我该怎么做,我需要在数组更新时更新数据,以便它可以显示在 Future Widget 中。

这是我的总代码

  class _SearchPgState extends State<SearchPg> {
  Future getData() async {
    var result = FilterArray.FilterArrayData;
    if (result.length != 0) {
      return result;
    } else {
      return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    print(FilterArray.FilterArrayData);

    return Scaffold(
      appBar: AppBar(
        title: Container(
          height: 50.0,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 3.0),
            child: Center(
              child: TextField(
                onTap: () => Get.to(SearchPgExtra()),
                readOnly: true,
                decoration: InputDecoration(
                  hintText: tr('search.search'),
                  alignLabelWithHint: true,
                  hintStyle: Theme.of(context).textTheme.subtitle2,
                  prefixIcon: Icon(Icons.search),
                ),
              ),
            ),
          ),
        ),
        actions: [
          IconButton(
            icon: Icon(
              FlutterIcons.sort_descending_mco,
              color: Theme.of(context).accentColor,
            ),
            onPressed: navigateToSortPage,
          ),
          IconButton(
            icon: Icon(
              FlutterIcons.filter_fea,
              color: Theme.of(context).primaryColor,
            ),
            onPressed: navigateToFilterPage,
          ),
        ],
      ),
      body: FutureBuilder(
        future: getData(), // async work

        builder: (context, projectSnap) {
          print(projectSnap.data);

          if (projectSnap.hasData) {
            return StaggeredGridView.countBuilder(
              itemCount: projectSnap.data.length,
              crossAxisCount: 4,
              staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
              mainAxisSpacing: 15.0,
              crossAxisSpacing: 15.0,
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: ScrollPhysics(),
              padding: EdgeInsets.symmetric(horizontal: 18.0),
              itemBuilder: (context, index) {
                var product = projectSnap.data[0][index];
                return FadeInAnimation(
                  index,
                  child: ProductCard2(
                    product: product,
                    isHorizontalList: false,
                  ),
                );
              },
            );
          } else {
            return Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.asset(
                    'assets/images/search.png',
                    width: MediaQuery.of(context).size.width / 2,
                  ),
                  SizedBox(height: 15.0),
                  Text(
                    'search.title',
                    style: Theme.of(context).textTheme.headline1,
                  ).tr(),
                  SizedBox(height: 15.0),
                  Text(
                    'search.subtitle',
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.subtitle1,
                  ).tr(),
                  SizedBox(
                    height: MediaQuery.of(context).size.height / 5,
                  ),
                ],
              ),
            );
          }
        },
      ),
    );
  }


}

在开始数组中为空然后在数组中添加值然后回来没有任何变化然后我重新加载屏幕然后它工作正常。

这就是我添加数组的方式

RangeSlider(
  values: _currentRangeValues,
  min: 0,
  max: 10000,
  divisions: 10,
  labels: RangeLabels(
    _currentRangeValues.start.round().toString(),
    _currentRangeValues.end.round().toString(),
  ),
  onChanged: (RangeValues values) {
    setState(() {
      _currentRangeValues = values;
      //print(_currentRangeValues);

    });
    var data = searchArray.searchArrayData;
    for (int i = 0; i < data.length; i++) {
      var current = data[i];

      if(current['Price'] >= _currentRangeValues.start && current['Price'] <= _currentRangeValues.end){
        print(data);
        FilterArray.FilterArrayData.add(data);

      }
    }
  },
),

当数据添加到 FilterArrayData 时,我会返回该页面上的页面数组而不更新,所以我更改页面并在 SearchPg 中再次返回,然后我可以看到数据

标签: flutterdart

解决方案


新开发人员经常会遇到此类情况。处理它的最好方法是状态管理包,如Provider、Bloc 等。访问链接,您将找到所有相关的软件包。就个人而言,我经常使用 Provider。Bloc也是一个不错的选择。很多人使用它。但是我没有机会使用它。Riverpod 是一个即将推出的软件包。但它仍然需要大量的修复。


推荐阅读