这里我自己封装了一个swiper

来源:6-4 轮播图Banner组件封装

酱卤小郡肝

2022-09-16

我参考慕课手记完成的封装swiper,老师看看有啥问题吗。麻烦老师提出改进哈

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my_demo/core/hi_state.dart';

class HiBaner extends StatefulWidget {
  final List<String> _images;
  double height;
  ValueChanged<int> onTap;
  Curve curves;
  HiBaner(this._images,
      {Key? key,
      this.height = 200,
      required this.onTap,
      this.curves = Curves.linear})
      : super(key: key);

  
  State<HiBaner> createState() => _HiBanerState();
}

class _HiBanerState extends State<HiBaner> with TickerProviderStateMixin {
  PageController? _pageController;
  Timer? _timer;
  int _curIndex = 0;

  
  void initState() {
    super.initState();
    _pageController = PageController();
    _initTimer();
  }

  
  void dispose() {
    super.dispose();
    _timer?.cancel();
    _timer = null;
  }

  
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        _buildPageView(),
        _buildIndicator(),
      ],
    );
  }

  Widget _buildPageView() {
    var length = widget._images.length;

    /// 点击到图片的时候取消定时任务
    _cancelTimer() {
      if (_timer != null) {
        _timer?.cancel();
        _timer = null;
        _initTimer();
      }
    }

    return SizedBox(
      height: widget.height,
      child: PageView.builder(
          controller: _pageController,
          onPageChanged: (index) {
            if (index == 0) {
              setState(() {
                _curIndex = length;
              });
            } else {
              setState(() {
                _curIndex = index;
              });
            }
          },
          itemBuilder: (context, index) {
            return GestureDetector(
              onPanDown: (details) {
                _cancelTimer();
              },
              onTap: () {
                widget.onTap(index);
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('当前 page 为 ${index % length}'),
                    duration: const Duration(milliseconds: 500),
                  ),
                );
              },
              child: Image.network(
                widget._images[index % length],
                fit: BoxFit.cover,
              ),
            );
          }),
    );
  }

  Widget _buildIndicator() {
    var length = widget._images.length;
    return Positioned(
      bottom: 10,
      child: Row(
        children: widget._images.map((s) {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 3.0),
            child: ClipOval(
              child: Container(
                width: 8,
                height: 8,
                color: s == widget._images[_curIndex % length]
                    ? Colors.white
                    : Colors.grey,
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  void _initTimer() {
    _timer = Timer.periodic(const Duration(seconds: 3), (t) {
      int index = _curIndex + 1;
      setState(() {
        _curIndex++;
      });
      _pageController?.animateToPage(
        index,
        duration: const Duration(milliseconds: 300),
        curve: Curves.linear,
      );
    });
  }
}

写回答

1回答

CrazyCodeBoy

2022-09-16

你运行的时候左右滚动有白屏的问题么
0
1
酱卤小郡肝
有白屏问题,而且没有flutter_swiper那么流畅
2022-09-19
共1条回复

Flutter高级进阶实战-仿哔哩哔哩-掌握Flutter高阶技能

一次性掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案

1723 学习 · 870 问题

查看课程