ScaffoldMessenger：巧妙实现跨屏信息传递

前端

2024-02-07 20:43:44

Flutter Widget 之 ScaffoldMessenger

在 Flutter 中，构建用户界面时，我们常常需要在不同屏幕之间进行导航。此时，如果我们希望在导航栏之前向用户显示一条消息，可以使用 ScaffoldMessenger 来实现跨屏信息传递。

ScaffoldMessenger 的优势

使用 ScaffoldMessenger 有以下优势：

跨屏信息传递： Snackbar 会随着页面导航而消失，而 ScaffoldMessenger 可以将消息传递到下一个屏幕，即使你已经导航到新页面，消息仍然会显示出来。
全局访问： ScaffoldMessenger 可以从任何地方访问，无论你身处哪个屏幕，你都可以使用它来显示消息。
自定义样式： ScaffoldMessenger 可以自定义样式，你可以根据自己的喜好来设置消息的外观。

ScaffoldMessenger 的使用

使用 ScaffoldMessenger 非常简单，只需要几行代码即可。

首先，你需要创建一个 ScaffoldMessenger 对象。
然后，你可以使用 showSnackBar() 方法来显示消息。
你还可以使用 hideCurrentSnackBar() 方法来隐藏当前的消息。

ScaffoldMessenger 的示例

以下是一个使用 ScaffoldMessenger 的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ScaffoldMessenger Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldMessengerKey,
      appBar: AppBar(
        title: Text('ScaffoldMessenger Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示消息
            scaffoldMessengerKey.currentState!.showSnackBar(
              SnackBar(
                content: Text('Hello, world!'),
              ),
            );

            // 导航到新页面
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NewPage()),
            );
          },
          child: Text('Show Message'),
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: Text('Message: Hello, world!'),
      ),
    );
  }
}