如何将ScaffoldMessenger中的Snackbar显示为Flutter中的小部件？

4c8rllxm 于 2022-12-30 发布在 Flutter

关注(0)|答案(3)|浏览(121)

我有一个新的Snackbar用例。我被要求做一个程序，从API读取文章，当它到达文章末尾时会显示Snackbar。我的意思是，所有使用Snackbar的例子总是使用一个按钮来显示它。当我到达文章末尾时，我如何显示Snackbar？
这是我的代码：

return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (state.hasReachedMax) {
          return const SnackbarPage(); //<= This one
        } else {
          if (index >= state.posts.length) {
            return const BottomLoader();
          } else {
            return PostListItem(post: state.posts[index]);
          }
        }
      },
      itemCount: state.hasReachedMax ? state.posts.length : state.posts.length + 1,
      controller: _scrollController,
    );

- - 小吃店 dart **

import 'package:flutter/material.dart';

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

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: ScaffoldMessenger(  //Error here
            child: SnackBar(
              content: const Text('Reach the end of posts'),
              action: SnackBarAction(
                onPressed: () {
                  //if action button is pressed
                },
                label: 'Close',
              ),
            ),
          ),
        );
      }
    }

出现错误：第一个月
ScaffoldMessenger似乎不能用作返回的Widget。
参考文件：Snackbar ScaffoldMessenger

flutter

来源：https://stackoverflow.com/questions/74925780/how-to-show-snackbar-within-scaffoldmessenger-as-widget-in-flutter

3条答案

按热度按时间

p1tboqfb1#

我认为您可以使用Scaffold. of方法访问ListView. builder的Scaffold祖先，然后在Scaffold上调用showSnackBar方法来显示Snackbar。
像这样的东西有用吗？

return ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    if (state.hasReachedMax) {
      Scaffold.of(context).showSnackBar(
        SnackBar(
          content: const Text('Reach the end of posts'),
          action: SnackBarAction(
            onPressed: () {
              //if action button is pressed
            },
            label: 'Close',
          ),
        ),
      );
      return Container();
    } else {
      if (index >= state.posts.length) {
        return const BottomLoader();
      } else {
        return PostListItem(post: state.posts[index]);
      }
    }
  },
  itemCount: state.hasReachedMax ? state.posts.length : state.posts.length + 1,
  controller: _scrollController,
);

赞(0）回复(0）举报 2022-12-30

o4tp2gmn2#

您可以使用ScaffoldMessanger显示snackbr，如下所示。

return ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    if (state.hasReachedMax) {
     ScaffoldMessanger.of(context).showSnackBar( <--- here use ScaffoldMessanger instead of Scaffold
     SnackBar(
      content: const Text('Reach the end of posts'),
      action: SnackBarAction(
        onPressed: () {
          //if action button is pressed
        },
        label: 'Close',
      ),
    ),
  );
  return SizedBox();
   } else {
     if (index >= state.posts.length) {
       return const BottomLoader();
   } else {
    return PostListItem(post: state.posts[index]);
   }
 }
},
  itemCount: state.hasReachedMax ? state.posts.length : state.posts.length + 1,
  controller: _scrollController,
);

赞(0）回复(0）举报 2022-12-30

km0tfn4u3#

若要在到达文章末尾时显示Snackbar，可以使用Scaffold.of(context).showSnackBar()方法。
例如：

// Import the Scaffold and SnackBar classes
import 'package: flutter/material.dart';

// ...

// Inside your build method
if (articles.length == 0) {
  // Display the SnackBar when there are no more articles to read
  Scaffold.of(context).showSnackBar(
    SnackBar(
      content: Text('No more articles to read'),
    ),
  );
}

这将在文章列表为空时显示Snackbar。您可以通过设置其内容、持续时间和其他属性来自定义Snackbar。

赞(0）回复(0）举报 2022-12-30

我来回答

如何将ScaffoldMessenger中的Snackbar显示为Flutter中的小部件？

3条答案

相关问题

热门标签

最新问答