列表视图单击导航到Flutter中的另一个页面

Question

我有一个ListView，我想让列表项可以点击。我的想法是，当用户点击一个项目时，它将被引导到另一个页面。每个底部都应该指向不同的屏幕。我在实现它时遇到了问题，我不知道该用什么ontap。我该怎么办？我应该使用ListTile而不是ListView吗？

import 'package:flutter/material.dart';
import 'package:untitled1/PerformancePulses.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',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ListViewHome()
);
}
}
class ListViewHome extends StatelessWidget {
final titles = ["Performance Pulses",
"Admin Indicator",];
final icons = [Icons.arrow_forward_ios_outlined, Icons.arrow_forward_ios_outlined];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: titles.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(titles[index]),
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
trailing: Icon(icons[index])));
});
}
}

Answer 1

将Card小部件包装到GestureDetector中，就有了onTap

return GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => YourRoute()));
},
child: Card(
child: ListTile(
title: Text(titles[index]),
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
trailing: Icon(icons[index])
)
),
)

Answer 2

首先为您的列表项创建模型类，如下所示：

class ItemModel {
final String title;
final Widget route;
ItemModel({@required this.title,@required this.route });
}

然后定义你的列表如下：

final _list = [ ItemModel(
title: "Performance Pulses", route: SomeWidget()),
ItemModel(
title: "Admin Indicator", route: SomeWidget2()),];

你的名单应该是这样的：

ListView.builder(
itemCount: _list.length,
itemBuilder: (context, index) {
return InkWell(
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => _list[index].route));
},
child: Card(
child: ListTile(
title: Text(_list[index].title),
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
trailing: Icon(icons[index]))),
);
})

Answer 3

您需要在卡上添加一个点击监听器，并导航到您想要的屏幕

样品

import 'package:flutter/material.dart';
import 'package:untitled1/PerformancePulses.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',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ListViewHome()
);
}
}
class ListViewHome extends StatelessWidget {
final titles = ["Performance Pulses",
"Admin Indicator",];
final icons = [Icons.arrow_forward_ios_outlined, 
Icons.arrow_forward_ios_outlined];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: titles.length,
itemBuilder: (context, index) {
return InkWell(
onTap: (){
//this is where you navigate to new screen
// SecondScreen() should be name of the second screen you created
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondScreen(

)),
);
},
child: Card(
child: ListTile(
title: Text(titles[index]),
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
trailing: Icon(icons[index]))),
);
});
}
}