如何在Flutter中将带条件的onTap添加到ListView.builder

zpjtge22  于 2023-02-09  发布在  Flutter
关注(0)|答案(2)|浏览(134)

我在卡片中有一个ListView生成器。在卡片的一列中,每张卡片显示一份工作和一个员工列表。如果列出的员工是已经登录应用的用户,他们的背景颜色会改变,以在列表中突出显示他们:

color: gblStaffId == data[index].staffId
                          ? kMainColor20
                          : Colors.white,

我希望能够允许他们点击自己的名字弹出一些额外的细节。他们不应该能够点击其他人。
我想我应该用墨水瓶,但我不知道怎么放,放哪里。

ListView.builder(
        itemCount: data.length,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (_, int index) {
          return Container(
            padding: EdgeInsets.all(5.0),
            margin: EdgeInsets.symmetric(vertical: 1.0),
            decoration: BoxDecoration(
              color: gblStaffId == data[index].staffId
                  ? kMainColor20
                  : Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(4)),
            ),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 49,
                  child: Text(
                    data[index].staffName!,
                    style: TextStyle(color: kBodyText, fontSize: 16),
                  ),
                ),
                Expanded(
                  flex: 23,
                  child: Text(
                    formatJsonTime24To12(data[index].startTime!)!
                        .toLowerCase(),
                    style: TextStyle(color: kBodyText, fontSize: 16),
                    textAlign: TextAlign.right,
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    ' -',
                    style: TextStyle(color: kBodyText, fontSize: 16),
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  flex: 23,
                  child: Text(
                    formatJsonTime24To12(data[index].finishTime!)!
                        .toLowerCase(),
                    style: TextStyle(color: kBodyText, fontSize: 16),
                    textAlign: TextAlign.right,
                  ),
                ),
              ],
            ),
          );
        })
wj8zmpe1

wj8zmpe11#

您可以从itemBuilder返回Gesture widget(或任何tappable),然后在onTap方法中添加三元或条件语句。

physics: NeverScrollableScrollPhysics(),
itemBuilder: (_, int index) {
  return GestureDetector(
    onTap: gblStaffId == data[index].staffId ? () {
      // your stuffs
    } : null,
    child: Container(
      padding: EdgeInsets.all(5.0),
      margin: EdgeInsets.symmetric(vertical: 1.0),
      decoration: BoxDecoration(
        color: gblStaffId == data[index].staffId
            ? kMainColor20
            : Colors.white,
at0kjp5o

at0kjp5o2#

你可以用

onTap :  gblStaffId == data[index].staffId
                          ? funcToCall(data[index].staffId)
                          : null

相关问题