在 Flutter 中显示 Snackbar 时向上移动底部对齐的小部件

Doc*_*Doc 6 flutter flutter-layout

这是我面临的一个简单问题

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.bottomCenter,
        child: Builder(
          builder: (BuildContext context) {
            return RaisedButton(
              onPressed: () => _showSnackbar(context),
              child: Text("show snackbar"),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
    );
  }

  void _showSnackbar(BuildContext context) {
    Scaffold.of(context)
      ..hideCurrentSnackBar()
      ..showSnackBar(SnackBar(
        content: Text("this is snackbar"),
      ));
  }
}
Run Code Online (Sandbox Code Playgroud)

Snackbar显示的FloatingActionButton向上移动,但RaisedButton背后却隐藏着的Snackbar。如何在Snackbar显示时不覆盖任何小部件?在 Android 中,我可以使用CoordinatorLayout. 我应该在这里做什么?

代码输出

Dha*_*udh 0

这是您的解决方案。

因此,这是下面提到的源代码的输出:查看

源代码:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const SafeArea(child: SizedBox()),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 32),
            child: ElevatedButton(
              onPressed: () {
                _showSnackbar(context);
              },
              child: const Text("Show snackbar"),
            ),
          ),
          FloatingActionButton(
            onPressed: () {},
          ),
        ],
      ),
    );
  }

  void _showSnackbar(BuildContext context) {
    ScaffoldMessenger.of(context).hideCurrentSnackBar();
    const SnackBar snackbar = SnackBar(content: Text("See, snackbar here!"));
    ScaffoldMessenger.of(context).showSnackBar(snackbar);
    return;
  }
}
Run Code Online (Sandbox Code Playgroud)