Question

我想在Flutter中为GirdView添加一个复选框。从API请求中提取的数据包括 selected 属性，默认值为 false 。当我单击每个项目的复选框时，它将更改值为 True ，并在UI上进行更新，我使用Mobx观察这些更改操作。当我调试值时，这些值已更改但UI没有更新，我真的不知道原因。我在下面为UI和Mobx模型添加了2张图片。

API：

{
    "name": "HuynhDuy Phuc",
    "birthday": "None",
    "phone": "N/A",
    "isSelected": false
},
{
    "name": "Doan Phuc",
    "birthday": "None",
    "phone": "N/A",
    "isSelected": false
},
{
    "name": "Phuc Vu",
    "birthday": "None",
    "phone": "N/A",
    "isSelected": false
},

    final _userApiPresenter = Provider.of<UserApiPresenter>(context);
    _userApiPresenter.fetchUsersList();

Observer(
                  name: 'ListHomePage',
                  builder: (BuildContext context) {
                    return (_userApiPresenter.userAPI != null)
                        ? AnimationLimiter(
                            child: GridView.builder(
                              physics: BouncingScrollPhysics(),
                              padding: EdgeInsets.all(12),
                              addAutomaticKeepAlives: true,
                              //Determine the number of cells per row
                              gridDelegate:
                                  new SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 3),
                              itemCount:
                                  _userApiPresenter.userAPI.users.length,
                              itemBuilder: (context, index) {
                                User user =
                                    _userApiPresenter.getUser(index: index);
                                return AnimationConfiguration.staggeredGrid(
                                  position: index,
                                  duration:
                                      const Duration(milliseconds: 375),
                                  columnCount: 2,
                                  child: Container(
                                    child: ScaleAnimation(
                                      child: GestureDetector(
                                        child: Stack(
                                          children: <Widget>[
                                            UserItem(
                                              name: user.name,
                                              type: user.name,
                                              phone: user.phone,
                                              birthday: user.birthday,
                                              isSelected: user.selected,
                                            ),
                                            Align(
                                              alignment: Alignment.topRight,
                                              child: Checkbox(
                                                value: user.selected,
                                                onChanged: (_) {
                                                    if(user.selected){
                                                      _userApiPresenter.changeStatusCheckBox(index: index);
                                                    } else{
                                                      _userApiPresenter.changeStatusCheckBox(index: index);
                                                    }
                                                },
                                              ),
                                            ),
                                          ],
                                        ),
                                        onTap: () {
                                          Navigator.push(
                                            context,
                                            MaterialPageRoute(
                                              builder:
                                                  (BuildContext context) =>
                                                      UserDetailPage(
                                                index: index,
                                                name: user.name,
                                              ),
                                            ),
                                          );
                                        },
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          )
                        : Center(
                            child: CircularProgressIndicator(),
                          );
                  },
                )

UI

Mobx model

Answer 1

关于用户数组和用户模型本身的可观察信息丢失了，但是您需要做的（如果已经没有的话）是：

使用户数组也可观察-通过这种方式进行的任何添加，删除等操作都将导致用户界面中用户框数量的更新
也使selected的属性User可见-这样，当某些用户处于“选择”状态时，UI会呈现更改。

还有一些话题：

您不需要使用@action方法的getUser属性，因为该方法不会更新任何可观察的数据

如果此答案不能解决您的问题，请提供userApi和User的实现：）

Answer 2

你只是错过了一件事。

mobX 不会更新 UI，除非你告诉它主变量改变了..

为此，只需将以下代码行添加到您的 changeStatusCheckBox()

_userAPI = _userAPI;

无法使用Mobx更改GridView Flutter中复选框的状态

2 个答案: