flutter 每个要注意的点

最新推荐文章于 2024-05-06 16:13:15 发布

氤氲息

最新推荐文章于 2024-05-06 16:13:15 发布

阅读量102

点赞数

分类专栏：安卓文章标签： flutter android

本文链接：https://blog.csdn.net/weixin_44911775/article/details/126121663

版权

安卓专栏收录该内容

381 篇文章 4 订阅

订阅专栏

这篇博客详细介绍了在Flutter中如何处理数据为空时的显示，以及如何根据列表数据是否为空来决定显示内容。同时，它展示了下拉刷新和分页加载功能的实现，通过监听滚动事件来判断是否加载更多数据。内容涵盖了Widget构建、数据条件判断以及滚动事件监听等关键点。

摘要由CSDN通过智能技术生成

列表
1.数据为空时的提示语

return MaterialApp(
      color: Colors.transparent,
      home: widget.upList.isEmpty?Column(//如果是空的就返回文字：暂无数据
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            alignment: Alignment.center,
            child: Container(
                margin: const EdgeInsets.only(bottom: 120),
                child: Column(children: [
                  ContentText(S.current.bottle_no_data, 14.0,
                      CommonColors.getTextWeakColor()),
                  TopPadding(30),
                ])),
          )
        ],
      ):Scaffold(）//如果有数据就返回这个里面的内容

2.要判断列表数据是否为空

  child: MediaQuery.removePadding(
              removeTop: true,
              context: context,
              child: widget.upList.isEmpty//如果数据为空就显示Container()，如果有内容就显示列表数据
                  ? Container()
                  : ListView.builder(
                      shrinkWrap: true,
                      itemCount: widget.upList.length,
                      itemBuilder: (BuildContext context, int index) {
                        BottleModel upList = widget.upList[index];
                        return GestureDetector(
                          onTap: () {
                            if (widget.onItemClicked != null) {
                              widget.onItemClicked!(index);
                              //延时
                              Future.delayed(const Duration(milliseconds: 500), () {
                                EventBusUtil.fire(
                                    OnCloseBottleRefresh(CloudCustomDataBean.TYPE_DRIFT_BOTTLE));
                              });
                            }
                          },
                          child: Stack(
                            alignment: Alignment.topRight,
                            children: [
                              if (index % 3 == 2)
                                Container(
                                  width: width,
                                  margin: const EdgeInsets.only(
                                      top: 16, left: 16, right: 16),
                                  padding: const EdgeInsets.only(
                                      left: 16, top: 16, bottom: 8, right: 16),
                                  decoration: BoxDecoration(
                                    color: const Color(0xFFFBFFF2),
                                    borderRadius: BorderRadius.circular(12),
                                    boxShadow: const [
                                      BoxShadow(
                                        color: Color(0xFFDBEBB6),
                                        blurRadius: 1,
                                      ),
                                    ],
                                  ),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.max,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        upList.text!,
                                        style: const TextStyle(
                                            color: Color(0xFF333333),
                                            fontSize: 18),
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 8),
                                        child: Text(
                                          DateUtil.formatDateMs(
                                              upList.downTime! * 1000,
                                              format: 'yyyy.MM.dd'),
                                          style: const TextStyle(
                                              color: Color(0xFF999999),
                                              fontSize: 12),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              Positioned(
                                top: 7,
                                right: 15,
                                child: showMessageNumView(upList.noReadNum),
                              )
                            ],
                          ),
                        );
                      })),

3.下拉分页加载

final ScrollController _scrollController = ScrollController();
  bool _hasMore = true;
  bool _isLoad = false;
  int pageSize  =20;
  @override
  void initState() {
    super.initState();
    // 监听滚动事件
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        //达到最大滚动位置
        _isLoad = true;
        if (_hasMore && _isLoad) {
          DownList? downList = currentMessageList?.last;
          _getReplyList(
              driftBottleId: downList?.driftBottleId,
              pageTime: downList?.createTime,
              status: 1,);
        }
      }
    });
    WidgetsBinding.instance!.addPostFrameCallback(_afterLayout);

  }

SingleChildScrollView(
        controller: _scrollController,
        reverse: currentMessageList!.length >= 6
            ? true
            : cloumHeight >= Global.screenHeight - 100, //注意设置为反向
        padding: const EdgeInsets.fromLTRB(12, 0, 12, 0),
        child: Column(
          key: _containerKey,
          children:
              (currentMessageList == null || currentMessageList.length == 0)
                  ? [Container()]: replyList == null
                  ? [Container()]
                  : currentMessageList.map((e) => MsgContainer(replyList: replyList!,downList: e,)).toList(),
        ));