flutter学习笔记--传递信息

2022-4-28

目录

前言

一、给指定route传值

1.定义传递参数

2.创建组件来获取参数

3.路由表注册

4.组件导航

二、页面回传数据

1.回调函数中传入回传数据信息

 三、传递数据至新的页面

1.构造器传参

2.RouteSettings传参

总结

---

---

前言

Navigator组件支持通过使用通用标识符从应用程序的任何地方导航到特定路由。在某些情况下，w我们可能还希望能够传递参数给特定路由。

---

一、给指定route传值

1.定义传递参数

代码如下（示例）：

class ScreenArguments { final String title; final String message; ScreenArguments(this.title, this.message); }

2.创建组件来获取参数

函数原型：

ModalRoute? route = ModalRoute.of(context);

使用：

final ScreenArguments args = ModalRoute.of(context)!.settings.arguments；

完整代码如下（示例）：

// A Widget that extracts the necessary arguments from
// the ModalRoute.
class ExtractArgumentsScreen extends StatelessWidget {
  const ExtractArgumentsScreen({Key? key}) : super(key: key);

  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    // Extract the arguments from the current ModalRoute
    // settings and cast them as ScreenArguments.
    final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

3.路由表注册

与之前无差别，即在material下使用route标记特定路线

代码如下

MaterialApp(
  routes: {
    'ExtractArgumentsScreen': (context) =>
        const ExtractArgumentsScreen(),
  },
)

4.组件导航

Navigator.pushNamed方法的扩展，其存在arguments:的属性可用于传递值

代码如下

ElevatedButton(
  onPressed: () {
    // When the user taps the button,
    // navigate to a named route and
    // provide the arguments as an optional
    // parameter.
    Navigator.pushNamed(
      context,
      ExtractArgumentsScreen.routeName,
      arguments: ScreenArguments(
        'Extract Arguments Screen',
        'This message is extracted in the build method.',
      ),
    );
  },
  child: const Text('Navigate to screen that extracts arguments'),
),

二、页面回传数据

1.回调函数中传入回传数据信息

Navigator.pop(context, '*****');

 三、传递数据至新的页面

1.构造器传参

（1）构造以传入数据为参数的构造器

class DetailScreen extends StatelessWidget {
  // In the constructor, require a Todo.
  const DetailScreen({Key? key, required this.todo}) : super(key: key);

  // Declare a field that holds the Todo.
  final Todo todo;

  @override
  Widget build(BuildContext context) {
    // 使用 Todo 对象构建 UI (Use the Todo to create the UI)
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(todo.description),//
      ),
    );
  }
}

 （2）Navigator.push时传入构造器

onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(todo: todos[index]),
          ),
        );
      },

2.RouteSettings传参

（1）使用ModalRoute.of(context)!.settings.arguments使参数可被我们操作

class DetailScreen extends StatelessWidget {
  const DetailScreen({Key? key}) : super(key: key);//不需要放入构造器

  @override
  Widget build(BuildContext context) {
    final todo = ModalRoute.of(context)!.settings.arguments as Todo;

    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

 （2）设置settings可选参数传入arguments

onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => const DetailScreen(),
            // Pass the arguments as part of the RouteSettings. The
            // DetailScreen reads the arguments from these settings.
            settings: RouteSettings(
              arguments: todos[index],
            ),
          ),
        );
      },

---

总结

本文总结了flutter最基本的传递数据方法