如何在容器底部显示 Snackbar 而不是屏幕颤动

Posted 2023-02-23

【中文标题】如何在容器底部显示 Snackbar 而不是屏幕颤动

【英文标题】：How to show Snackbar at the bottom of container and not screen flutter

【发布时间】：2021-03-19 13:29:10

【问题描述】：

我有下面的屏幕来实现，我遇到的问题是我不知道如何在容器底部显示小吃栏。它在屏幕底部显示小吃栏，但我希望它如下所示：

注意：图片中的 Snackbar 显示有文字“Whoray, Right Answer”。

添加代码：

SingleChildScrollView(
      child: BlocBuilder<QuizControllerCubit, QuizControllerState>(
        builder: (context, state) 
          if (state is OnWrongAnswerGiven) 
            SnackBarCustomWidget.showSnackBar(
              context,
              SnackBarWidget.getSnackBar(context, state.message),
            );
           else if (state is OnRightAnswerGiven) 
            SnackBarCustomWidget.showSnackBar(
              context,
              SnackBarWidget.getSnackBar(context, state.message),
            );
          
          return SnackBarCustomWidget(
            child: Builder(
              builder: (context) => Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  QuizTitleWidget(title: question.name),
                  Container(
                    constraints: BoxConstraints(
                      minHeight: MediaQueryUtils(context).height * 0.5,
                      maxHeight: MediaQue

【问题讨论】：

我在您上传的图片中没有看到任何 Snackbar。能详细点吗？

@RaviSinghLodhi 我已经更新了我的答案。它与文本“Whoray 正确答案”一起显示。

【参考方案1】：

让我给你一个小部件

class MySnackBarStack extends StatefulWidget 
  final Widget child;

  const MySnackBarStack(Key key, this.child) : super(key: key);
  @override
  _MySnackBarStackState createState() => _MySnackBarStackState();

  static void showSnackBar(BuildContext context,SnackBar snackBar)
    context.findAncestorStateOfType<_MySnackBarStackState>()._showSnackBar(snackBar);
  

  static void hideSnackBar(BuildContext context)
    context.findAncestorStateOfType<_MySnackBarStackState>()._hideSnackBar();
  


class _MySnackBarStackState extends State<MySnackBarStack> 
  Widget snackBar = SizedBox();

  void _showSnackBar(SnackBar snackBar)
    setState(() 
      this.snackBar = snackBar;
    );
  

  void _hideSnackBar()
    setState(() 
      snackBar = SizedBox();
    );
  

  @override
  Widget build(BuildContext context) 
    return Stack(
      children: [
        widget.child,
        snackBar,
      ],
    );
  

现在在任何构建方法中都像这样使用它

//you cannot access MySnackBarStack here and up
MySnackBarStack(
    child: Builder(
      //you can only access MySnackBarStack here and down
      builder: (newContext)
        return MyContainer(
          onTap:()
            MySnackBarStack.showSnackBar(newContext, snackBar);
          
        );
      ,
    ),
  )

【讨论】：

在调用 showSnackBar 时显示错误，说明 MySnackBarStack 在 null 上被调用。我已经包装了我需要在 MySnackBarStack 中显示的小部件。

用Builder 为MySnackBarStack 的孩子引入一个新的context，使用更新编辑问题

你能上传一个示例代码吗？

我已将名称更改为 SnackBarCustomWidget

已经更新了答案，错误仍然存​​在？