时间戳

首页 > 解决方案 > 每次更新数据时如何在颤振中重建完整视图

flutter - 每次更新数据时如何在颤振中重建完整视图

问题描述

我正在使用一个应用程序，它必须注册用户、显示所有注册用户并能够编辑用户信息。

我想要达到的结果是，在编辑用户信息时，返回到完整重建的列表屏幕并再次重新加载所有用户，但更新信息。

从显示数据列表的屏幕开始，我有一个名为 AdministrativeListData 的主视图，它是向用户显示的视图，在其中我有一个 Widget AdministrativeListCard，它的功能是。当用户进行滚动时，再次调用提供程序以加载以下用户并将它们添加到列表中。

代码管理列表数据：

 class AdministrativeListData extends StatefulWidget {
 @override
 _AdministrativeListDataState createState() => _AdministrativeListDataState();
}

class _AdministrativeListDataState extends State<AdministrativeListData> {
  @override
  Widget build(BuildContext context) {
final administrativeProvider = Provider.of<AdministrativeProvider>(context);

return Scaffold(
  appBar: AppBar(
      backgroundColor: ColorsTheme.primary,
      leading: GestureDetector(
        onTap: () {
          Navigator.pushReplacementNamed(context, 'home');
        },
        child: Container(
            padding: EdgeInsets.all(16),
            child: FaIcon(FontAwesomeIcons.arrowLeft)),
      ),
      actions: [
        InkWell(
          onTap: () {
            showSearch(
                context: context, delegate: AdministrativeDataSearch());
          },
          child: Padding(
            padding: EdgeInsets.all(16),
            child: FaIcon(FontAwesomeIcons.search),
          ),
        ),
      ],
      centerTitle: true,
      title: Text(Constants.titleAdministrativeRecordList),
      automaticallyImplyLeading: false),
  body: Stack(
    children: <Widget>[
      ImageBackground(),
      administrativeProvider.administrativeListPage.isEmpty
          ? CustomLoad()
          : Container(),
      AdministrativeListCard(
        listAdministrativeElement:
            administrativeProvider.administrativeListPage,
        onNextPage: () => administrativeProvider.getAdministratives(),
        ),
      ],
    ),
  );
 }
}

代码管理列表卡：

    class AdministrativeListCard extends StatefulWidget {
        final List<DatumAdministrative> listAdministrativeElement;
        final Function onNextPage;

        AdministrativeListCard(
        {@required this.listAdministrativeElement, @required this.onNextPage});

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

class _AdministrativeListCardState extends State<AdministrativeListCard> {
  bool _canGetMore = true;
  final ScrollController _scrollController = ScrollController();
  final preferences = new PreferencesUser();

  @override
  Widget build(BuildContext context) {
    bool isScreenLarge = Screen.largeScreen(context);

    _scrollController.addListener(() {
      final double diff = _scrollController.position.maxScrollExtent -
          _scrollController.position.pixels;

      if (diff <= 500) {
        if (_canGetMore) {
          _canGetMore = false;
          widget.onNextPage();
        }
      } else {
        _canGetMore = true;
      }
    });
    return Container(
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: isScreenLarge ? 3 : 2,
            crossAxisSpacing: 1,
            mainAxisSpacing: 1,
            childAspectRatio:
                isScreenLarge ? (220.0 / 220.0) : (200.0 / 200.0)),
        controller: _scrollController,
        itemCount: widget.listAdministrativeElement.length,
        itemBuilder: (context, i) => businessCardAdministrative(
            context, widget.listAdministrativeElement[i], isScreenLarge),
      ),
    );
  }

在 AdministrativeListCard 中，为了将参数发送到编辑数据的屏幕，我按如下方式发送它们。

 Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => AdministrativeDetail(
              administrativeElement: administrativeElement)),
    ).then((value) => setState(() {})

分组阅读，他们评论说添加then((value) => setState(() {}). 这将使它再次更新整个视图，但该选项对我不起作用。

要获取用户列表，我这样做：

  AdministrativeProvider() {
    this.getAdministratives();
  }

  getAdministratives() async {
    final token = await _secureStorage.readToken('token');
    _currentPage++;

    try {
      final headers = {
        'content-type': 'application/json',
        'accept': 'application/json',
        'authorization': 'Bearer $token'
      };

      final uri = Uri.parse(
          '${ApiPaths.basisApi}${ApiPaths.getEmployeesCount}?paginated=true&currentPage=$_currentPage&recordsPerPage=12');
      final response = await http.get(
        uri,
        headers: headers,
      );

      final administrative = Administrative.fromJson(response.body);

      administrativeListPage = [
        ...administrativeListPage,
        ...administrative.data
      ];
    } catch (exception, stackTrace) {
      await Sentry.captureException(
        exception,
        stackTrace: stackTrace,
      );
    }

    notifyListeners();
  }

标签： flutter

解决方案

首先：您确定将元素添加到列表中吗？

另外我建议你修改代码：

.then((value) {setState(() {}; print("Running then part...")})

然后在/方法中的_AdministrativeListCardState类build中initState添加print("In _AdministrativeListCardState...");

然后检查print("Running then part...")零件是否在print("In _AdministrativeListCardState...");

我怀疑你.then跑得比你预料的要早……

当我需要类似的东西时，我是这样做的：

await Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => AdministrativeDetail(
              administrativeElement: administrativeElement)),
    );

setState(() {});

推荐阅读