ListTile、图标和onTap

Question

我正在使用带有两个图标（leading和trailing）的ListTile。 我想知道是否可以有两个不同的操作。如果我点击前导图标，一种操作，如果我点击尾随图标，另一种操作。

下面是我的当前源代码。非常感谢您的帮助。感激不尽。

ListTile(
                                  trailing: Icon(Icons.keyboard_arrow_right),
                                  leading: ConstrainedBox(
                                    constraints: BoxConstraints(
                                      minWidth: leadingIconMinSize,
                                      minHeight: leadingIconMinSize,
                                      maxWidth: leadingIconMaxSize,
                                      maxHeight: leadingIconMaxSize,
                                    ),

                                    child: Icon(Icons.check_box_outline_blank),//Image.asset('assets/icons/inbox.png'),
                                  ),

                                  title: GestureDetector(
                                    child: Text(
                                      //'task_Name' correspond au nom du champ dans la table
                                      document.data()['task_Name'],
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    ),

                                    onTap: () {

                                      print('case à cocher');
                                      //TODO decider ce que je fais pour ici
                                    },

                                    // Pour editer task
                                    onDoubleTap: () {
                                      taskSelectedID = FirebaseFirestore
                                          .instance
                                          .collection('Users')
                                          .doc(
                                          FirebaseAuth.instance.currentUser.uid)
                                          .collection('allTasks')
                                          .doc(document.id);

                                      var myUser = FirebaseAuth.instance.currentUser
                                          .uid;
                                      var test = (document.id);

                                      print('$myUser');

                                      print('$test');

                                      print('$taskSelectedID');

                                      print(taskDetail);

                                      //      showDialog(context: context, builder: (_) {
                                      //        return MyShowGeneralDialog();
                                      //      });
                                    },
                                  ),

                                  //TODO afficher nom projet ou marquer pas de projet ou rien si aucun projet
                                  subtitle:Text('no project' ),//Text(document.data()['project_Name']),
                                ),

- Laurent Thomas

Answer 1

有多种方法可以做到这一点

• 手势检测器（GestureDetector）
• 图标按钮（IconButton）
• 水波纹（InkWell）

以下是一个示例，可以让您更好地了解

ListTile(
  title: Text('${billing.name}'),
  leading: GestureDetector(
    child: Icon(Icons.shopping_bag),
    onTap: () {
      // Action 1
    },
  ),
  trailing: IconButton(
    icon: Icon(Icons.more_vert_sharp),
    onPressed: () => {
      // Action 2
    },
  ),
),

- nitishk72

Answer 2

你可以使用 IconButton 小部件来替代 Icon 小部件。

trailing: IconButton(icon:Icons.keyboard_arrow_right, onTap: (){}),

您也可以使用任何其他的小部件，同时将其包装在InkWell或GestureDetector中。

trailing: GestureDetector(child: Container(), onPressed: (){})

将相同的应用于主要内容。

- Talaal_M

---

没问题。只需确保将答案标记为正确，以便其他人受益。 - Talaal_M

Answer 3

你可以将 IconButton 直接放在尾部或者头部。

这可能看起来像这样：

ListTile(
    trailing: IconButton(icon: Icon(Icons.keyboard_arrow_right), onPressed: () {
      print('secondAction');
    }),
    leading: ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 20,
        minHeight: 20,
        maxWidth: 20,
        maxHeight: 20,
      ),

      child: IconButton(icon: Icon(Icons.check_box_outline_blank), onPressed: () {
        print('firstAction');
      }),
    ),

    title: GestureDetector(
      child: Text(
        //'task_Name' correspond au nom du champ dans la table
        document.data()['task_Name'],
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),

      onTap: () {

        print('case à cocher');
        //TODO decider ce que je fais pour ici
      },

      // Pour editer task
      onDoubleTap: () {
        taskSelectedID = FirebaseFirestore
          .instance
          .collection('Users')
          .doc(
            FirebaseAuth.instance.currentUser.uid)
          .collection('allTasks')
          .doc(document.id);

        var myUser = FirebaseAuth.instance.currentUser
          .uid;
        var test = (document.id);

        print('$myUser');

        print('$test');

        print('$taskSelectedID');

        print(taskDetail);

        //      showDialog(context: context, builder: (_) {
        //        return MyShowGeneralDialog();
        //      });
      },
    ),

    //TODO afficher nom projet ou marquer pas de projet ou rien si aucun projet
    subtitle: Text('no project'), //Text(document.data()['project_Name']),
  ),

注意这一部分：

trailing: IconButton(icon: Icon(Icons.keyboard_arrow_right), onPressed: () {print('secondAction');}),
    leading: ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 20,
        minHeight: 20,
        maxWidth: 20,
        maxHeight: 20,
      ),
        child: IconButton(icon: Icon(Icons.check_box_outline_blank), onPressed: () {print('firstAction');),

- Max Mustermann