在Flutter中,通过命名路由传递列表可以使用以下步骤:
arguments
参数来传递列表数据:arguments
参数来传递列表数据:ModalRoute
来获取传递的参数,并将其转换为列表:ModalRoute
来获取传递的参数,并将其转换为列表:完整的示例代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Named Route',
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/second': (context) => SecondPage(),
},
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<String> myList = ['Item 1', 'Item 2', 'Item 3'];
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: RaisedButton(
child: Text('Go to Second Page'),
onPressed: () {
Navigator.pushNamed(
context,
'/second',
arguments: myList,
);
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<String> myList = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: ListView.builder(
itemCount: myList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(myList[index]),
);
},
),
);
}
}
这个示例演示了如何在Flutter中使用命名路由传递列表数据。在HomePage
中,点击按钮后会跳转到SecondPage
,并将myList
作为参数传递。在SecondPage
中,使用ModalRoute
来获取传递的参数,并在ListView.builder
中显示列表数据。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云