如何在动态列表视图中导航至下一页-Flutter
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在动态列表视图中导航至下一页-Flutter相关的知识,希望对你有一定的参考价值。
我有一个类别的列表,并使用ListViewBuilder在ListTile中显示它。我想转到被点击的特定类别页面。代码示例:
final category = [
'Category One',
'Category Two',
'Category Three',
],
我正在写Navigator.push,如下所示:但是在这里我想要动态的东西。我希望你明白了。
onTap(){
Navigator.push(context, MaterialPageRoute(builder: (context)=>CategoryOne(),),);
}
答案
如果每种可能性都有一个类别小部件,则可以在MaterialPageRoute构建器中进行切换:
Navigator.push(context, MaterialPageRoute(builder: (context) {
switch (selectedCategory) {
case 'Category One':
return CategoryOne();
break;
case 'Category Two':
return CategoryTwo();
break;
case 'Category Three':
return CategoryThree();
break;
default:
return CategoryOne();
}
}));
另一答案
您可以使用路线轻松导航。
以下示例可能会清除您关于如何通过路线实现期望输出的想法。
import 'package:flutter/material.dart';
import 'package:master/them.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeGenerator.themeDataGenerator,
routes: {
'/': (context) => MyHomePage(),
'/firstCategory': (context) => FirstCategory(),
'/secondCategory': (context) => SecondCategory(),
},
);
}
}
class SecondCategory extends StatelessWidget {
const SecondCategory({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text("second"),
);
}
}
class FirstCategory extends StatelessWidget {
const FirstCategory({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(child: Text("First"));
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final category = [
'firstCategory',
'secondCategory',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Default"),
),
body: ListView.builder(
itemCount: 2,
itemBuilder: (context, index) {
return Center(
child: Padding(
padding: EdgeInsets.all(10.0),
child: InkWell(
onTap: () {
Navigator.pushNamed(context, '/${category[index]}');
},
child: Text(
index.toString(),
textScaleFactor: 5.0,
),
),
),
);
},
));
}
}
以上是关于如何在动态列表视图中导航至下一页-Flutter的主要内容,如果未能解决你的问题,请参考以下文章