在 listview flutter 中添加多个 onTap 事件的最佳方法是什么？

Question

Widget _myListView(BuildContext context) {

  final titles = ['bike', 'boat', 'bus', 'car',
    'railway', 'run', 'subway', 'transit', 'walk'];

  final icons = [Icons.directions_bike, Icons.directions_boat,
    Icons.directions_bus, Icons.directions_car, Icons.directions_railway,
    Icons.directions_run, Icons.directions_subway, Icons.directions_transit,
    Icons.directions_walk];

  final ontaps = [ ,] ```how can i add multiple onTap events ```

  return ListView.builder(
    itemCount: titles.length,
    itemBuilder: (context, index) {
      return Card( //                           <-- Card widget
        child: ListTile(
          leading: Icon(icons[index]),
          title: Text(titles[index]),
          onTap: ,
        ),
      );
    },
  );
}

请帮助我如何轻松地为长列表添加 onTap 事件

1.如何以添加图标、标题、子标题的方式添加 onTap 事件使用字符串 2.我是新手，请原谅我的错误..谢谢

Answer 1

更新的答案，现在如果您选择自行车，它会导航到其他页面：

main.dart

import 'package:flutter/material.dart';
import 'package:prova/page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: {
        'other_page': (BuildContext context) => Example(),
      },
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: _myListView(context),
    );
  }
}

Widget _myListView(BuildContext context) {
  final titles = [
    'bike',
    'boat',
    'bus',
    'car',
    'railway',
    'run',
    'subway',
    'transit',
    'walk'
  ];

  final icons = [
    Icons.directions_bike,
    Icons.directions_boat,
    Icons.directions_bus,
    Icons.directions_car,
    Icons.directions_railway,
    Icons.directions_run,
    Icons.directions_subway,
    Icons.directions_transit,
    Icons.directions_walk
  ];

  functionBike() {
    Navigator.pushNamed(context, 'other_page');

    print('directions_bike');
  }

  functionBoat() {
    print('directions_boat');
  }

  functionBus() {
    print('directions_bus');
  }

  functionCar() {
    print('directions_car');
  }

  functionRailway() {
    print('directions_railway');
  }

  functionRun() {
    print('directions_run');
  }

  functionSubway() {
    print('directions_subway');
  }

  functionTransit() {
    print('directions_transit');
  }

  functionWalk() {
    print('directions_walk');
  }

  final List<Function> ontaps = [
    functionBike,
    functionBoat,
    functionBus,
    functionCar,
    functionRailway,
    functionRun,
    functionSubway,
    functionTransit,
    functionWalk
  ];

  return ListView.builder(
    itemCount: titles.length,
    itemBuilder: (context, index) {
      return Card(
        //                           <-- Card widget
        child: ListTile(
          leading: Icon(icons[index]),
          title: Text(titles[index]),
          onTap: () {
            ontaps[index]();
          },
        ),
      );
    },
  );
}

希望对您有所帮助。

Answer 2

要为您的 listtile 中的所有小部件添加 onTap 事件，您可以使用以下代码，

             return ListView.builder(
                    itemCount: titles.length,
                    itemBuilder: (context, index) {
                      return Card( //                           <-- Card widget
                        child: ListTile(
                          leading: IconButton(icon: Icon(icons[index]),onPressed: (){
                            // add your code on tap for your iconButton
                          },),
                          title: Text(titles[index]),
                          onTap: (){
                            // add your code on tap for your listview row tile
                          },
                        ),
                      );
                    },
                  );

这对你有用。