单击项目生成器 Flutter 的行视图时刷新 ListView.builder

Question

我正在开发 flutter 应用程序，我在 BottomSheet 弹出窗口中使用 ListView.builder class。我需要开发一些东西，用户可以从 ListView select 多个数据。

为此，我使用 Map mapProfCredsT = new Map<dynamic, bool>(); 来存储列表视图中每个单元格的点击事件。另外，我在每个点击事件上都使用了 setState() {} 以便更新我的数据。但即使在这之后我也无法在点击事件后为我的每个单元格更新 UI。

请考虑以下代码片段：

Map mapProfCredsT = new Map<dynamic, bool>();

在 API 调用的响应中，我添加了每个 ID 为 false 的所有标志，

for (int i = 0; i < arrProfCredsCount; i++) {
int id_key = respProfCreds['payload']['user_type'][i]['id'];
mapProfCredsT[id_key] = false; }

现在容器和图标的颜色取决于容器的点击事件如下：

Widget build(BuildContext context) {
return Material(
  type: MaterialType.transparency,
  child: Scaffold(
    key: scaffoldState,
    body: SafeArea(
      child: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.teal,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10.0),
              width: double.infinity,
              child: Text(
                'BottomSheet Sample',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 30.0,
                  color: Colors.black,
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.all(20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        if (isChanged) {
                          isChanged = false;
                        } else {
                          isChanged = true;
                        }
                      });
                    },
                    child: Container(
                      color: Colors.white,
                      padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                      child: Text('Change'),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      // scaffoldState.currentState.showBottomSheet(
                      // scaffoldState.currentState.showBottomSheet(
                      showModalBottomSheet(
                          context: context,
                          builder: (builder) {
                            return new Container(
                              color: Colors.white,
                              height: 70.0.h,
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    height: 10.0.w,
                                    color: Colors.white,
                                    child: Center(
                                      child: Text(
                                        'Professional Creds',
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: Container(
                                      child: ListView.builder(
                                          itemCount: arrProfCredsCount,
                                          itemBuilder: (context, index) {
                                            return ConstrainedBox(
                                              constraints: BoxConstraints(
                                                minHeight: 15.0.w,
                                              ),
                                              child: GestureDetector(
                                                onTap: () {
                                                  var profID = respProfCreds['payload']['user_type'][index]['id'];
                                                  print('Position on bottomsheet : $profID');
                                                  setState(() {
                                                    // Update text data..
                                                    respProfCreds['payload']['user_type'][index]['title'] =
                                                        'Test ${respProfCreds['payload']['user_type'][index]['id']}';
                                                  });
                                                },
                                                child: Container(
                                                  margin: EdgeInsets.all(2.0.w),
                                                  // color: Colors.tealAccent,
                                                  // color: mapProfCredsT[respProfCreds['payload']['user_type'][index]['id']]? themeYellow: Colors.blueGrey,
                                                  color: isChanged ? themeYellow : Colors.blueGrey,
                                                  child: Center(
                                                    child: Text(
                                                      '${respProfCreds['payload']['user_type'][index]['title']}',
                                                      textAlign: TextAlign.start,
                                                      style: kDataSingleSelectionBottomNav,
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            );
                                          }),
                                    ),
                                  ),
                                ],
                              ),
                            );
                          });
                    },
                    child: Container(
                      color: Colors.white,
                      padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                      child: Text('Open'),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);}

请让我知道我在这里做错了什么不允许我更新我的记录。

Answer 1

bottomSheet 永远不会被 setState 更新，因为你需要使用有状态的构建器。在这个 sheet 中，无论你想使用 setState 还是使用 statefulBuilder 中声明的 updateState。

    showModalBottomSheet(
          context: context,
          builder: (builder) {
            return StatefulBuilder(builder: (context,updateState){
//stateful builder added over here
              return Container(
                color: Colors.white,
                height: 70.0.h,
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 10.0.w,
                      color: Colors.white,
                      child: Center(
                        child: Text(
                          'Professional Creds',
                        ),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        child: ListView.builder(
                            itemCount: arrProfCredsCount,
                            itemBuilder: (context, index) {
                              return ConstrainedBox(
                                constraints: BoxConstraints(
                                  minHeight: 15.0.w,
                                ),
                                child: GestureDetector(
                                  onTap: () {
                                    var profID = respProfCreds['payload']['user_type'][index]['id'];
                                    print('Position on bottomsheet : $profID');
                                    updateState(() {
                                      // Update text data..
                                      respProfCreds['payload']['user_type'][index]['title'] =
                                      'Test ${respProfCreds['payload']['user_type'][index]['id']}';
                                    });
                                  },
                                  child: Container(
                                    margin: EdgeInsets.all(2.0.w),
                                    // color: Colors.tealAccent,
                                    // color: mapProfCredsT[respProfCreds['payload']['user_type'][index]['id']]? themeYellow: Colors.blueGrey,
                                    color: isChanged ? themeYellow : Colors.blueGrey,
                                    child: Center(
                                      child: Text(
                                        '${respProfCreds['payload']['user_type'][index]['title']}',
                                        textAlign: TextAlign.start,
                                        style: kDataSingleSelectionBottomNav,
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            }),
                      ),
                    ),
                  ],
                ),
              );
            });
          });

Answer 2

这里的问题是 showModalBottomSheet 不是你的 StatefulWidget 的一部分，这意味着调用 setState 只刷新你的 StatefulWidget 而不是 [=14] =] 因为它不是它的一部分。

所以为了解决这个问题。你这样做

将 StatefulWidget 传递给您的 showModalBottomSheet 生成器
使用 StatefulBuilder 作为您的 showModalBottomSheet 构建器的子项，然后使用此 StatefulBuilder 中的 setState，使用不同的名称以避免混淆。

单击项目生成器 Flutter 的行视图时刷新 ListView.builder

Refresh on ListView.builder while click on row view of item builder Flutter

flutter

flutter-layout

flutter-listview