flutter Snackbar未显示

wyyhbhjk  于 2023-01-14  发布在  Flutter
关注(0)|答案(3)|浏览(321)

我是flutter的新手,在这里我找不到为什么我的snackbar没有显示在用户界面中。我尝试了完全一样的文档。

Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
            final snackBar = SnackBar(
              content: const Text('Yay! A SnackBar!'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {},
              ),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
        ),
      ),
    ));
eagi6jfj

eagi6jfj1#

问题是,对ScaffoldMessenger.of(context).showSnackBar(snackBar)的调用使Flutter在小部件树中搜索ScaffoldMessenger类型的祖先,但它无法找到。
发生这种情况的原因是,您传入了小部件BuildContext,而小部件位于Scaffold声明的**之下,但它却以相反的方向进行搜索。
一种解决方案是,将对ScaffoldMessenger.of的调用封装在Builder小部件中,这将引入一个新的BuildContext,然后Flutter能够在小部件树中找到ScaffoldMessenger并使用它来显示SnackBar。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) {
              return ElevatedButton(
                child: const Text('Show SnackBar'),
                onPressed: () {
                  final snackBar = SnackBar(
                    content: const Text('Yay! A SnackBar!'),
                    action: SnackBarAction(
                      label: 'Undo',
                      onPressed: () {},
                    ),
                  );
                  ScaffoldMessenger.of(context).showSnackBar(snackBar);
                },
              );
            }
          ),
        ),
      ),
    );
  }
}

查看Builder文档,它解释了关于.of()方法的所有内容:https://api.flutter.dev/flutter/widgets/Builder-class.html

deyfvvtc

deyfvvtc2#

这是在flutter中显示SnackBar的示例代码

import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  const SnackBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: const Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );

          // Find the ScaffoldMessenger in the widget tree
          // and use it to show a SnackBar.
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}

照片:

wxclj1h5

wxclj1h53#

尝试下面的代码,你可能错过了忘记 Package 你的支架与MaterialApp();

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
            final snackBar = SnackBar(
              content: const Text('Yay! A SnackBar!'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {},
              ),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
        ),
      ),
    );
  }
}

相关问题