zhiying_base_widget/lib/widgets/custom/notice/custom_notice_widget.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'bloc/bloc.dart';
import 'custom_notice_sk.dart';

///
/// 公告滚动widget
///
class CustomNoticeWidget extends StatelessWidget {
  final Map<String, dynamic> model;

  const CustomNoticeWidget(this.model);

  @override
  Widget build(BuildContext context) {
    return BlocProvider<CustomNoticeBloc>(
      create: (_) =>
      CustomNoticeBloc(repository: CustomNoticeRepository())
        ..add(CustomNoticeInitEvent(model: model)),
      child: _CustomNoticeWidgetContainer(),
    );
  }
}

class _CustomNoticeWidgetContainer extends StatefulWidget {
  @override
  _CustomNoticeWidgetContainerState createState() => _CustomNoticeWidgetContainerState();
}

class _CustomNoticeWidgetContainerState extends State<_CustomNoticeWidgetContainer> {
  /// 子item点击事件
  void _itemOnClick(CustomNoticeModel model) {
    if (pageIndex == model.listStyle.length) {
      pageIndex = 0;
    }
    print('===== $pageIndex');
    NoticeListStyle item = model.listStyle[pageIndex];
    _itemJump(item);
  }

  /// 子item跳转
  void _itemJump(NoticeListStyle model) {
    print('${model?.contentText}');
    RouterUtil.route(model, model.toJson(), context);
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<CustomNoticeBloc, CustomNoticeState>(
      listener: (context, state) {},
      buildWhen: (prev, current) {
        return true;
      },
      builder: (context, state) {
        if (state is CustomNoticeLoadedState) {
          return _getMainWidget(state?.model);
        }
        return CustomNoticeSkeleton();
      },
    );
  }

  /// 主体页面
  Widget _getMainWidget(CustomNoticeModel model) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
          color: HexColor.fromHex(model?.bgColor),
          //color: Colors.orangeAccent,
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(ParseUtil.stringParseDouble(model?.topRightRadius, defVal: 7.5)),
            topLeft: Radius.circular(ParseUtil.stringParseDouble(model?.topLeftRadius, defVal: 7.5)),
            bottomLeft: Radius.circular(ParseUtil.stringParseDouble(model?.bottomLeftRadius, defVal: 7.5)),
            bottomRight: Radius.circular(ParseUtil.stringParseDouble(model?.bottomRightRadius, defVal: 7.5)),
          )),
      margin: EdgeInsets.only(
          top: ParseUtil.stringParseDouble(model?.topMargin),
          left: ParseUtil.stringParseDouble(model?.leftRightMargin),
          right: ParseUtil.stringParseDouble(model?.leftRightMargin)),
      padding: EdgeInsets.symmetric(horizontal: 7.5, vertical: 7.5),
      child: Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(7.5), color: HexColor.fromHex(model?.outsideBgColor ?? '#F6F6F6')),
        padding: const EdgeInsets.only(top: 8, bottom: 8, left: 12, right: 8),
        width: double.infinity,
        child: _getChildWidget(model),
      ),
    );
  }

  var pageIndex = 0;

  Widget _getChildWidget(CustomNoticeModel model) {
    return GestureDetector(
      onTap: () => _itemOnClick(model),
      behavior: HitTestBehavior.opaque,
      child: Row(
        children: <Widget>[

          /// 图片
          // Container(width: 52, height: 13, color: Colors.red),
          CachedNetworkImage(
            imageUrl: model?.appNameImg ?? '',
            width: 52,
          ),
          const SizedBox(width: 14),

          /// 文字
          Expanded(
            child: Container(
              width: double.infinity,
              height: 15,
              alignment: Alignment.centerLeft,
              // color: Colors.yellowAccent,
              child: MarqueeWidget(
                model?.listStyle?.length ?? 0,
                    (BuildContext context, int index) {
                  NoticeListStyle item = model.listStyle[index];
                  return Align(alignment: Alignment.centerLeft, child: Text('${item?.contentText}', style: TextStyle(color: HexColor.fromHex(model?.textColor), fontSize: 12)));
                },
                onPageChanged: (index) => pageIndex = index,
              ),
            ),
          ),
          const SizedBox(width: 14),

          /// 图片
          CachedNetworkImage(imageUrl: model?.jumpImg ?? '', height: 18),
          // Container(
          //   width: 18,
          //   height: 18,
          //   color: Colors.red,
          // ),
        ],
      ),
    );
  }
}

// 上下滚动的消息轮播
class MarqueeWidget extends StatefulWidget {
  int count; // 子视图数量
  IndexedWidgetBuilder itemBuilder; // 子视图构造器
  final ValueChanged<int> onPageChanged;

  MarqueeWidget(this.count, this.itemBuilder, {this.onPageChanged});

  @override
  _MarqueeWidgetState createState() => _MarqueeWidgetState();
}

class _MarqueeWidgetState extends State<MarqueeWidget> {
  PageController _controller;
  Timer _timer;

  @override
  void initState() {
    super.initState();

    if (widget.count > 0) {
      _controller = PageController();
      _timer = Timer.periodic(Duration(seconds: 5), (timer) {
        // 如果当前位于最后一页，则直接跳转到第一页，两者内容相同，跳转时视觉上无感知
        try {
          if (_controller.page.round() >= widget.count) {
            _controller.jumpToPage(0);
          }
          _controller.nextPage(duration: Duration(seconds: 1), curve: Curves.linear);
        } catch (e){
          _timer?.cancel();
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    //   return PageView.builder(
    //     scrollDirection: Axis.vertical,
    //     controller: _controller,
    //     itemBuilder: (buildContext, index) {
    //       if (index < widget.count) {
    //         return widget.itemBuilder(buildContext, index);
    //       } else {
    //         return widget.itemBuilder(buildContext, 0);
    //       }
    //     },
    //     itemCount: widget.count + 1, // 在原数据末尾添加一笔数据(即第一笔数据)，用于实现无限循环滚动效果
    //   );
    // }

    return PageView.custom(
      physics: NeverScrollableScrollPhysics(),
      childrenDelegate: SliverChildBuilderDelegate((context, index) {
        if (index < widget.count) {
          return widget.itemBuilder(context, index);
        } else {
          return widget.itemBuilder(context, 0);
        }
      }, childCount: widget.count + 1),
      scrollDirection: Axis.vertical,
      controller: _controller,
      onPageChanged: widget?.onPageChanged,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller?.dispose();
    _timer?.cancel();
  }
}