有没有办法从 ListView 项目更改屏幕?
Is there a way to change screen from an ListView Item?
我必须制作一个 flutter 应用程序,其中我的 HomeScreen 页面填充了一个 ListView(此小部件填充了来自 firebase 数据库的数据)并且我已经完成了这个但现在我必须制作一个 onPressed 事件。我用 InkWell 做到了这一点,但现在我不知道如何让每个项目都有不同的功能。
这是我的代码:
//主屏幕
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<Function> itemFunctions = [
() {
print("1");
Navigator.pop(context, MaterialPageRoute(builder: (context) => Antique()));},
() {Navigator.pop(context, MaterialPageRoute(builder: (context) => Mediterana()));},
() {Navigator.pop(context, MaterialPageRoute(builder: (context) => SuperKebab()));},
];
return new Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text("e-Radauti Restaurante"),
),
body: Container(
child: StreamBuilder(
stream: _firebaseRef.onValue,
builder: (context, snap) {
if (snap.hasData &&
!snap.hasError &&
snap.data.snapshot.value != null) {
Map data = snap.data.snapshot.value;
List item = [];
data.forEach(
(index, data) => item.add({"key": index, ...data}));
return ListView.builder(
itemCount: item.length,
itemBuilder: (context, index) {
return Card(
child: Container(
child: InkWell(
child: MediaQuery.removePadding(context: context,removeTop: true,removeBottom: true, child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 100,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
imageUrl:
item[index]["photoUrl"].toString(),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
Column(
children: <Widget>[
Text(item[index]["name"]),
Text(item[index]["description"]),
],
)
]
),),
onTap: () {itemFunctions[index]; print("Clicked item nr $index");}
),
),
);
},
);
}
return CircularProgressIndicator();
})
),
);
}
}
编辑:这是我要更改的屏幕之一
class SuperKebab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Meniu Super Kebab"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Revin!'),
),
),
);
}
}
编辑:我点击项目似乎有效,但未调用 <code>List < Function >... </code>
中的函数。
这是我的日志输出
这是我的 firebase 数据库结构:
所以基本上我的第一个项目是古董,第二个是 Mediterana,最后一个是 SuperKebab
我希望当我单击第一个项目(古董)时导航到古董屏幕,当我单击第二个项目时我希望它导航到 Mediterana 屏幕等等。
我认为一种方法是制作一个函数并根据情况使用来自 firebase 存储的数据填充它。
您可以手动或以编程方式将函数定义到列表中,然后使用 ListView.builder
中的索引调用该列表,如下所示
List<Function> itemfunctions = [
(){print('Button Pressed!');},
(){Navigator.of(context).pop()},
(){Navigator.popAndPushNamed(context, NewScreen.routeName)},
];
//Where you initialize this depends on whether you need context or not
ListView.builder(
shrinkWrap: true,
itemCount: numbers.length,
itemBuilder: (context, index) => Column(
children: <Widget>[
Text(
numbers[index].toString(),
),
RaisedButton(
child: Text('$index number'),
onPressed: itemfunctions[index],
)
],
),
)
我必须制作一个 flutter 应用程序,其中我的 HomeScreen 页面填充了一个 ListView(此小部件填充了来自 firebase 数据库的数据)并且我已经完成了这个但现在我必须制作一个 onPressed 事件。我用 InkWell 做到了这一点,但现在我不知道如何让每个项目都有不同的功能。
这是我的代码:
//主屏幕
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<Function> itemFunctions = [
() {
print("1");
Navigator.pop(context, MaterialPageRoute(builder: (context) => Antique()));},
() {Navigator.pop(context, MaterialPageRoute(builder: (context) => Mediterana()));},
() {Navigator.pop(context, MaterialPageRoute(builder: (context) => SuperKebab()));},
];
return new Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text("e-Radauti Restaurante"),
),
body: Container(
child: StreamBuilder(
stream: _firebaseRef.onValue,
builder: (context, snap) {
if (snap.hasData &&
!snap.hasError &&
snap.data.snapshot.value != null) {
Map data = snap.data.snapshot.value;
List item = [];
data.forEach(
(index, data) => item.add({"key": index, ...data}));
return ListView.builder(
itemCount: item.length,
itemBuilder: (context, index) {
return Card(
child: Container(
child: InkWell(
child: MediaQuery.removePadding(context: context,removeTop: true,removeBottom: true, child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 100,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
imageUrl:
item[index]["photoUrl"].toString(),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
Column(
children: <Widget>[
Text(item[index]["name"]),
Text(item[index]["description"]),
],
)
]
),),
onTap: () {itemFunctions[index]; print("Clicked item nr $index");}
),
),
);
},
);
}
return CircularProgressIndicator();
})
),
);
}
}
编辑:这是我要更改的屏幕之一
class SuperKebab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Meniu Super Kebab"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Revin!'),
),
),
);
}
}
编辑:我点击项目似乎有效,但未调用 <code>List < Function >... </code>
中的函数。
这是我的日志输出
这是我的 firebase 数据库结构:
所以基本上我的第一个项目是古董,第二个是 Mediterana,最后一个是 SuperKebab
我希望当我单击第一个项目(古董)时导航到古董屏幕,当我单击第二个项目时我希望它导航到 Mediterana 屏幕等等。
我认为一种方法是制作一个函数并根据情况使用来自 firebase 存储的数据填充它。
您可以手动或以编程方式将函数定义到列表中,然后使用 ListView.builder
中的索引调用该列表,如下所示
List<Function> itemfunctions = [
(){print('Button Pressed!');},
(){Navigator.of(context).pop()},
(){Navigator.popAndPushNamed(context, NewScreen.routeName)},
];
//Where you initialize this depends on whether you need context or not
ListView.builder(
shrinkWrap: true,
itemCount: numbers.length,
itemBuilder: (context, index) => Column(
children: <Widget>[
Text(
numbers[index].toString(),
),
RaisedButton(
child: Text('$index number'),
onPressed: itemfunctions[index],
)
],
),
)